Toggle
On/off control for boolean settings. Figma V8.0: Type (default / slim) × Size (sm / md) × Text, with Default, Hover, Focus and Disabled states.
import
{ Toggle } from "@pepulux/ui"Sizes
Small
Medium
Type: Slim
Slim with textThumb fills the track height.
With description
Email notificationsReceive a daily digest.
SMS alertsGet critical alerts via SMS.
Disabled
Feature locked
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | — | Controlled checked state |
| defaultChecked | boolean | false | Uncontrolled default state |
| onChange | (checked: boolean) => void | — | Called when toggle changes |
| type | "default" | "slim" | "default" | Figma Type — Default | Slim (thumb fills the track height) |
| size | "sm" | "md" | "md" | Figma Size — default 36×20 / 44×24, slim 32×16 / 40×20 |
| label | string | — | Label next to the toggle |
| description | string | — | Supporting text below label |
| disabled | boolean | false | Disables interaction |