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

```ripple
import { Toggle } from 'ark-ripple/toggle';
import { Bold } from 'lucide-ripple';
import styles from 'styles/toggle.module.css';

export component Basic() {
  <Toggle.Root class={styles.Root}>
    <Bold />
  </Toggle.Root>
}

```

### Controlled

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

**Example: controlled**

```ripple
import { Toggle } from 'ark-ripple/toggle';
import { Heart } from 'lucide-ripple';
import { track } from 'ripple';
import styles from 'styles/toggle.module.css';

export component Controlled() {
  let pressed = track(false);

  <Toggle.Root
    class={styles.Root}
    {pressed}
    onPressedChange={(value) => {
      @pressed = value;
    }}
  >
    <Toggle.Indicator
      class={styles.Indicator}
      fallback={component() {
        <Heart />
      }}
    >
      <Heart fill="currentColor" />
    </Toggle.Indicator>
  </Toggle.Root>
}

```

### Disabled

Use the `disabled` prop to disable the toggle.

**Example: disabled**

```ripple
import { Toggle } from 'ark-ripple/toggle';
import { Bold } from 'lucide-ripple';
import styles from 'styles/toggle.module.css';

export component Disabled() {
  <Toggle.Root class={styles.Root} disabled>
    <Bold />
  </Toggle.Root>
}

```

### Indicator

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

**Example: indicator**

```ripple
import { Toggle } from 'ark-ripple/toggle';
import { Heart } from 'lucide-ripple';
import styles from 'styles/toggle.module.css';

export component Indicator() {
  <Toggle.Root class={styles.Root}>
    <Toggle.Indicator
      class={styles.Indicator}
      fallback={component() {
        <Heart />
      }}
    >
      <Heart fill="currentColor" />
    </Toggle.Indicator>
  </Toggle.Root>
}

```

## API Reference

### Props

**Component API Reference**

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


### 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. |