Toggle
FormsA two-state button that can be either on or off.
Import
import { Toggle } from "@/components/ui/toggle";Usage
Default
The default toggle style.
Outline
A toggle with an outline.
With Text
A toggle with text and icon.
Sizes
Different toggle sizes.
Disabled
A disabled toggle.
API Reference
variant"default""default" | "outline"The visual style of the toggle
size"default""default" | "sm" | "lg"The size of the toggle
pressed—booleanControlled pressed state
onPressedChange—(pressed: boolean) => voidEvent handler for pressed state change
disabledfalsebooleanWhether the toggle is disabled
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | "default" | The visual style of the toggle |
size | "default" | "sm" | "lg" | "default" | The size of the toggle |
pressed | boolean | — | Controlled pressed state |
onPressedChange | (pressed: boolean) => void | — | Event handler for pressed state change |
disabled | boolean | false | Whether the toggle is disabled |