Toggle
A switch control for toggling between on and off states. Supports labels, hints, sizes, and disabled state.
Base with Label
A simple toggle with a label.
Base with Label
Remember me
Enable notifications
Label and Hint
A toggle with both label and descriptive hint text.
Label and Hint
Remember meSave my login details for next time.
Enable notificationsGet notified about updates and messages.
Disabled
Disabled toggles in both off and on states.
Disabled
Disabled offThis toggle is disabled.
Disabled onThis toggle is disabled.
Sizes
Three sizes: sm, md, and lg.
Small / Medium / Large
SmallToggle size sm.
MediumToggle size md.
LargeToggle size lg.
Usage
Import the Toggle component and configure with props.
tsx
import { Toggle } from "@/components/ui/Toggle";
// Basic
<Toggle label="Remember me" size="sm" />
// With hint
<Toggle label="Remember me" hint="Save my login details for next time." size="sm" />
// Controlled
const [enabled, setEnabled] = useState(false);
<Toggle label="Notifications" checked={enabled} onChange={setEnabled} />
// Disabled
<Toggle label="Disabled" disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Label text next to the toggle. |
| hint | string | — | Hint/description text below the label. |
| size | "sm" | "md" | "lg" | "sm" | Size of the toggle track. |
| disabled | boolean | false | Disable the toggle. |
| checked | boolean | — | Controlled checked state. |
| defaultChecked | boolean | false | Initial checked state (uncontrolled). |
| onChange | (checked: boolean) => void | — | Called when toggle state changes. |