> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

# Toggle

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

## Features

- Full keyboard navigation.

- Can be controlled or uncontrolled.

## Anatomy

Import the component.

```jsx
import { Toggle } from "@radix-solid/primitives";

export default () => <Toggle.Root />;
```

## API Reference

### Root

The toggle.

| Prop                                                                                                                                                                    | Type       | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean`  | `false` |
| `defaultPressed`The pressed state of the toggle when it is initially rendered. Use when you do not need to control its pressed state.                                   | `boolean`  | —       |
| `pressed`The controlled pressed state of the toggle. Must be used in conjunction with `onPressedChange`.                                                                | `boolean`  | —       |
| `onPressedChange`Event handler called when the pressed state of the toggle changes.                                                                                     | `function` | —       |
| `disabled`When `true`, prevents the user from interacting with the toggle.                                                                                              | `boolean`  | —       |

| Data attribute    | Values                |
| ----------------- | --------------------- |
| `[data-state]`    | `"on" \| "off"`       |
| `[data-disabled]` | Present when disabled |

## Accessibility

### Keyboard Interactions

| Key     | Description                       |
| ------- | --------------------------------- |
| `Space` | Activates/deactivates the toggle. |
| `Enter` | Activates/deactivates the toggle. |