Switch
Binary toggle control with animated thumb. Fully accessible via keyboard and ARIA role='switch'.
import
{ Switch } from "@pepulux/ui"States — off / on / disabled
Uncontrolled switches for showing each visual state side-by-side.
Off
On
Disabled off
Disabled on
Controlled — with label
Drive checked state from React state. Toggle updates the label text.
Enabled
Settings form — multiple switches
Real-world pattern: notification preference toggles with labels and descriptions.
Email alerts
Receive email notifications
SMS alerts
Receive SMS text messages
Push notifications
Receive browser push alerts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | — | Controlled checked state |
| onCheckedChange | (checked: boolean) => void | — | Called with the new boolean value when toggled |
| disabled | boolean | false | Prevents toggling and dims the control |
| className | string | — | Additional CSS classes on the button element |