# Toggle

A two-state button that is either on or off.

Group: Forms

## Import

```tsx
import { Toggle } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function ToggleDemo() {
  return (
    <HStack gap="4" wrap="wrap">
      <Toggle aria-label="Bold" variant="outline">
        B
      </Toggle>
      <ToggleGroup.Root type="multiple" variant="outline">
        <ToggleGroup.Item value="b">B</ToggleGroup.Item>
        <ToggleGroup.Item value="i">I</ToggleGroup.Item>
        <ToggleGroup.Item value="u">U</ToggleGroup.Item>
      </ToggleGroup.Root>
      <ToggleGroup.Root type="single" spacing={0}>
        <ToggleGroup.Item value="l">L</ToggleGroup.Item>
        <ToggleGroup.Item value="c">C</ToggleGroup.Item>
        <ToggleGroup.Item value="r">R</ToggleGroup.Item>
      </ToggleGroup.Root>
      <ToggleGroup.Root orientation="vertical" spacing={0}>
        <ToggleGroup.Item value="1">1</ToggleGroup.Item>
        <ToggleGroup.Item value="2">2</ToggleGroup.Item>
      </ToggleGroup.Root>
    </HStack>
  )
}
```

## Props

### Toggle

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "outline"` | `default` | `"default"` is transparent (ghost), `"outline"` has a border. |
| `pressed` | `boolean` |  |  |
| `defaultPressed` | `boolean` |  |  |
| `onPressedChange` | `(pressed: boolean) => void` |  |  |

`*` = required. Style props and HTML attributes are accepted too.