# 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" />

## Anatomy

<Anatomy id="toggle" />

```tsx
<Toggle.Root>
  <Toggle.Indicator />
</Toggle.Root>
```

## Examples

**Example: basic**

#### React

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

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

```

#### Solid

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

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

```

#### Vue

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

<template>
  <Toggle.Root :class="styles.Root">
    <BoldIcon />
  </Toggle.Root>
</template>

```

#### Svelte

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

<Toggle.Root class={styles.Root}>
  <BoldIcon />
</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 { HeartIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/toggle.module.css'

export const Controlled = () => {
  const [pressed, setPressed] = useState(false)
  return (
    <Toggle.Root className={styles.Root} pressed={pressed} onPressedChange={setPressed}>
      <Toggle.Indicator className={styles.Indicator} fallback={<HeartIcon />}>
        <HeartIcon fill="currentColor" />
      </Toggle.Indicator>
    </Toggle.Root>
  )
}

```

#### Solid

```tsx
import { Toggle } from '@ark-ui/solid/toggle'
import { HeartIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'
import styles from 'styles/toggle.module.css'

export const Controlled = () => {
  const [pressed, setPressed] = createSignal(false)
  return (
    <Toggle.Root class={styles.Root} pressed={pressed()} onPressedChange={setPressed}>
      <Toggle.Indicator class={styles.Indicator} fallback={<HeartIcon />}>
        <HeartIcon fill="currentColor" />
      </Toggle.Indicator>
    </Toggle.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Toggle } from '@ark-ui/vue/toggle'
import { HeartIcon } from 'lucide-vue-next'
import { ref } from 'vue'
import styles from 'styles/toggle.module.css'

const pressed = ref(false)
</script>

<template>
  <Toggle.Root :class="styles.Root" v-model:pressed="pressed">
    <Toggle.Indicator :class="styles.Indicator">
      <template #fallback>
        <HeartIcon />
      </template>
      <HeartIcon fill="currentColor" />
    </Toggle.Indicator>
  </Toggle.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Toggle } from '@ark-ui/svelte/toggle'
  import { HeartIcon } from 'lucide-svelte'
  import styles from 'styles/toggle.module.css'

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

<Toggle.Root class={styles.Root} bind:pressed>
  <Toggle.Indicator class={styles.Indicator}>
    {#snippet fallback()}
      <HeartIcon />
    {/snippet}
    <HeartIcon fill="currentColor" />
  </Toggle.Indicator>
</Toggle.Root>

```

### 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'
import styles from 'styles/toggle.module.css'

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

```

#### Solid

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

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

```

#### Vue

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

<template>
  <Toggle.Root :class="styles.Root" disabled>
    <BoldIcon />
  </Toggle.Root>
</template>

```

#### Svelte

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

<Toggle.Root class={styles.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 { HeartIcon } from 'lucide-react'
import styles from 'styles/toggle.module.css'

export const Indicator = () => {
  return (
    <Toggle.Root className={styles.Root}>
      <Toggle.Indicator className={styles.Indicator} fallback={<HeartIcon />}>
        <HeartIcon fill="currentColor" />
      </Toggle.Indicator>
    </Toggle.Root>
  )
}

```

#### Solid

```tsx
import { Toggle } from '@ark-ui/solid/toggle'
import { HeartIcon } from 'lucide-solid'
import styles from 'styles/toggle.module.css'

export const Indicator = () => {
  return (
    <Toggle.Root class={styles.Root}>
      <Toggle.Indicator class={styles.Indicator} fallback={<HeartIcon />}>
        <HeartIcon fill="currentColor" />
      </Toggle.Indicator>
    </Toggle.Root>
  )
}

```

#### Vue

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

<template>
  <Toggle.Root :class="styles.Root">
    <Toggle.Indicator :class="styles.Indicator">
      <template #fallback>
        <HeartIcon />
      </template>
      <HeartIcon fill="currentColor" />
    </Toggle.Indicator>
  </Toggle.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Toggle } from '@ark-ui/svelte/toggle'
  import { HeartIcon } from 'lucide-svelte'
  import styles from 'styles/toggle.module.css'
</script>

<Toggle.Root class={styles.Root}>
  <Toggle.Indicator class={styles.Indicator}>
    {#snippet fallback()}
      <HeartIcon />
    {/snippet}
    <HeartIcon fill="currentColor" />
  </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 | ArrayElement | (string & {})` | 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" |


#### Vue

**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. |
| `disabled` | `boolean` | No | Whether the toggle is disabled. |
| `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. |


**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

**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. |
| `getRootProps` | `() => T["element"]` | Props for the root `button` element. |
| `getIndicatorProps` | `() => T["element"]` | Props for the optional visual indicator (e.g. icon) element. |
