# 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 id="basic" />

### Controlled

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

<Example id="controlled" />

### Disabled

Use the `disabled` prop to disable the toggle.

<Example id="disabled" />

### Indicator

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

<Example id="indicator" />

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

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