# Toggle

URL: https://ark-ui.com/docs/components/toggle
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/toggle.mdx

A two-state button that can be toggled on or off.

---

<ComponentPreview id="Toggle" />

## Examples

Here's a basic example of how to use the `Toggle` component:

**Example: basic**

#### React

```tsx
import { Toggle } from '@ark-ui/react/toggle'
import { BoldIcon } from 'lucide-react'

export const Basic = () => {
  return (
    <Toggle.Root>
      <BoldIcon />
    </Toggle.Root>
  )
}

```

#### Solid

```tsx
import { Toggle } from '@ark-ui/solid/toggle'
import { BoldIcon } from 'lucide-solid'

export const Basic = () => {
  return (
    <Toggle.Root>
      <BoldIcon />
    </Toggle.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Toggle } from '@ark-ui/vue/toggle'
import { BoldIcon } from 'lucide-vue-next'
</script>

<template>
  <Toggle.Root>
    <BoldIcon />
  </Toggle.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { Toggle } from '@ark-ui/svelte/toggle'
  import { Bold } from 'lucide-svelte'
</script>

<Toggle.Root>
  <Bold />
</Toggle.Root>

```

### Controlled

Use the `pressed` and `onPressedChange` props to control the toggle's state.

**Example: controlled**

#### React

```tsx
import { Toggle } from '@ark-ui/react/toggle'
import { Volume, VolumeOff } from 'lucide-react'
import { useState } from 'react'

export const Controlled = () => {
  const [pressed, setPressed] = useState(false)
  return (
    <div>
      <Toggle.Root pressed={pressed} onPressedChange={setPressed}>
        {pressed ? <Volume /> : <VolumeOff />}
      </Toggle.Root>
      <p>Volume is {pressed ? 'unmuted' : 'muted'}</p>
    </div>
  )
}

```

#### Solid

```tsx
import { Toggle } from '@ark-ui/solid/toggle'
import { Volume, VolumeOff } from 'lucide-solid'
import { Show, createSignal } from 'solid-js'

export const Controlled = () => {
  const [pressed, setPressed] = createSignal(false)
  return (
    <div>
      <Toggle.Root pressed={pressed()} onPressedChange={setPressed}>
        <Show when={pressed()} fallback={<VolumeOff />}>
          <Volume />
        </Show>
      </Toggle.Root>
      <p>Volume is {pressed() ? 'unmuted' : 'muted'}</p>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Toggle } from '@ark-ui/vue/toggle'
import { Volume, VolumeOff } from 'lucide-vue-next'
import { ref } from 'vue'

const pressed = ref(false)
</script>

<template>
  <div>
    <Toggle.Root v-model:pressed="pressed">
      <component :is="pressed ? Volume : VolumeOff" />
    </Toggle.Root>
    <p>Volume is {{ pressed ? 'unmuted' : 'muted' }}</p>
  </div>
</template>

```

#### Svelte

```svelte
<script>
  import { Toggle } from '@ark-ui/svelte/toggle'
  import { Volume, VolumeOff } from 'lucide-svelte'

  let pressed = $state(false)
</script>

<div>
  <Toggle.Root bind:pressed>
    {#if pressed}
      <Volume />
    {:else}
      <VolumeOff />
    {/if}
  </Toggle.Root>
  <p>Volume is {pressed ? 'unmuted' : 'muted'}</p>
</div>

```

### Disabled

Use the `disabled` prop to disable the toggle.

**Example: disabled**

#### React

```tsx
import { Toggle } from '@ark-ui/react/toggle'
import { BoldIcon } from 'lucide-react'

export const Disabled = () => {
  return (
    <Toggle.Root disabled>
      <BoldIcon />
    </Toggle.Root>
  )
}

```

#### Solid

```tsx
import { Toggle } from '@ark-ui/solid/toggle'
import { BoldIcon } from 'lucide-solid'

export const Disabled = () => {
  return (
    <Toggle.Root disabled>
      <BoldIcon />
    </Toggle.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Toggle } from '@ark-ui/vue/toggle'
import { BoldIcon } from 'lucide-vue-next'
</script>

<template>
  <Toggle.Root disabled>
    <BoldIcon />
  </Toggle.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Toggle } from '@ark-ui/svelte/toggle'
  import { BoldIcon } from 'lucide-svelte'
</script>

<Toggle.Root disabled>
  <BoldIcon />
</Toggle.Root>

```

### Indicator

Use the `Toggle.Indicator` component to render different indicators based on the state of the toggle.

**Example: indicator**

#### React

```tsx
import { Toggle } from '@ark-ui/react/toggle'
import { Volume, VolumeOff } from 'lucide-react'

export const Indicator = () => {
  return (
    <Toggle.Root>
      <Toggle.Indicator fallback={<Volume />}>
        <VolumeOff />
      </Toggle.Indicator>
    </Toggle.Root>
  )
}

```

#### Solid

```tsx
import { Toggle } from '@ark-ui/solid/toggle'
import { Volume, VolumeOff } from 'lucide-solid'

export const Indicator = () => {
  return (
    <Toggle.Root>
      <Toggle.Indicator fallback={<Volume />}>
        <VolumeOff />
      </Toggle.Indicator>
    </Toggle.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Toggle } from '@ark-ui/vue/toggle'
import { Volume, VolumeOff } from 'lucide-vue-next'
</script>

<template>
  <Toggle.Root>
    <Toggle.Indicator>
      <template #fallback>
        <Volume />
      </template>
      <VolumeOff />
    </Toggle.Indicator>
  </Toggle.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { Toggle } from '@ark-ui/svelte/toggle'
  import { Volume, VolumeOff } from 'lucide-svelte'
</script>

<Toggle.Root>
  <Toggle.Indicator>
    {#snippet fallback()}
      <Volume />
    {/snippet}
    <VolumeOff />
  </Toggle.Indicator>
</Toggle.Root>

```

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultPressed` | `boolean` | No | The default pressed state of the toggle. |
| `onPressedChange` | `(pressed: boolean) => void` | No | Event handler called when the pressed state of the toggle changes. |
| `pressed` | `boolean` | No | The pressed state of the toggle. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | toggle |
| `[data-part]` | root |
| `[data-state]` | "on" | "off" |
| `[data-pressed]` | Present when pressed |
| `[data-disabled]` | Present when disabled |


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `fallback` | `string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>` | No | The fallback content to render when the toggle is not pressed. |


**Indicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | toggle |
| `[data-part]` | indicator |
| `[data-disabled]` | Present when disabled |
| `[data-pressed]` | Present when pressed |
| `[data-state]` | "on" | "off" |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultPressed` | `boolean` | No | The default pressed state of the toggle. |
| `onPressedChange` | `(pressed: boolean) => void` | No | Event handler called when the pressed state of the toggle changes. |
| `pressed` | `boolean` | No | The pressed state of the toggle. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | toggle |
| `[data-part]` | root |
| `[data-state]` | "on" | "off" |
| `[data-pressed]` | Present when pressed |
| `[data-disabled]` | Present when disabled |


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `fallback` | `number | boolean | Node | (string & {}) | ArrayElement` | No |  |


**Indicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | toggle |
| `[data-part]` | indicator |
| `[data-disabled]` | Present when disabled |
| `[data-pressed]` | Present when pressed |
| `[data-state]` | "on" | "off" |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultPressed` | `boolean` | No | The default pressed state of the toggle. |
| `disabled` | `boolean` | No | Whether the toggle is disabled. |
| `onPressedChange` | `(pressed: boolean) => void` | No | Event handler called when the pressed state of the toggle changes. |
| `pressed` | `boolean` | No | The pressed state of the toggle. |
| `ref` | `Element` | No |  |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | toggle |
| `[data-part]` | root |
| `[data-state]` | "on" | "off" |
| `[data-pressed]` | Present when pressed |
| `[data-disabled]` | Present when disabled |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseToggleContext]>` | Yes |  |


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `fallback` | `Snippet<[]>` | No | The fallback content to render when the toggle is not pressed. |
| `ref` | `Element` | No |  |


**Indicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | toggle |
| `[data-part]` | indicator |
| `[data-disabled]` | Present when disabled |
| `[data-pressed]` | Present when pressed |
| `[data-state]` | "on" | "off" |


### Context

These are the properties available when using `Toggle.Context`, `useToggleContext` hook or `useToggle` hook.

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `pressed` | `boolean` | Whether the toggle is pressed. |
| `disabled` | `boolean` | Whether the toggle is disabled. |
| `setPressed` | `(pressed: boolean) => void` | Sets the pressed state of the toggle. |