Form Inputs
Toggle
A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
Component props#
| Name | Type | Description |
|---|---|---|
| label | string | Label text displayed above the toggle |
| variant | 'default' | 'outline' | Visual style (default: "default") |
| size | 'sm' | 'md' | 'lg' | Control size (default: "md") |
| isSelected | boolean | Controlled selected state |
| defaultSelected | boolean | Default selected state |
| isDisabled | boolean | Disables the toggle |
| onChange | (isSelected: boolean) => void | Called when state changes |
| onPressedChange | (pressed: boolean, event: Event) => void | Base UI passthrough, called alongside onChange |
The toggleVariants helper is exported so other components (such as ToggleGroupItem) can share the same styles.