# Toggle

URL: https://ark-ui.com/docs/components/toggle
LLM: https://ark-ui.com/llms.txt/components/toggle

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

---



## Anatomy



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

## Examples

```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>
  )
}
```

### Controlled

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

```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>
  )
}
```

### Disabled

Use the `disabled` prop to disable the toggle.

```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>
  )
}
```

### Indicator

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

```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>
  )
}
```

## API Reference

### Props

### Root

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`defaultPressed`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The default pressed state of the toggle.

**`onPressedChange`**
Type: `(pressed: boolean) => void`
Required: false
Default Value: `undefined`
Description: Event handler called when the pressed state of the toggle changes.

**`pressed`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The pressed state of the toggle.

#### Data Attributes

**`data-scope`**: toggle
**`data-part`**: root
**`data-state`**: "on" | "off"
**`data-pressed`**: Present when pressed
**`data-disabled`**: Present when disabled

### Indicator

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`fallback`**
Type: `string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>`
Required: false
Default Value: `undefined`
Description: The fallback content to render when the toggle is not pressed.

#### Data Attributes

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