Components / Controls
Switch
An immediate on or off setting.
@fabrials/ui
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { Switch } from "@fabrials/ui";Or install it under shadcn's name, so code that imports
@/components/ui/switchgets this control. See shims.npx shadcn@latest add @fabrials/switch
API reference
| Prop / export | Type | Description |
|---|---|---|
checked | boolean | Current setting. |
onCheckedChange | (checked) => void | Called when the setting changes. |
Behavior
Use a switch for something that takes effect now. Use a checkbox when the change is saved with the rest of a form.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.