---
id: toggle
title: Toggle
description: 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 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

<ComponentTypes id="toggle" />

### Context

<ContextType id="toggle" />
