Switch
A control that allows the user to toggle between checked and not checked.
Off
1<Switch />#Installation
1bunx barefoot add switch#Usage
1import { createSignal } from '@barefootjs/dom'2import { Switch } from '@/components/ui/switch'34export default function Page() {5 const [checked, setChecked] = createSignal(false)6 return (7 <Switch8 checked={checked()}9 onCheckedChange={setChecked}10 />11 )12}#Examples
#Basic
Off
1const [airplaneMode, setAirplaneMode] = createSignal(false)23<div class="flex items-center gap-2">4 <Switch5 checked={airplaneMode()}6 onCheckedChange={setAirplaneMode}7 />8 <span>Airplane Mode</span>9</div>#Disabled
1<Switch checked={false} disabled />2<Switch checked={true} disabled />#Multiple Switches
Wi-Fi
Bluetooth
Notifications
1const [wifi, setWifi] = createSignal(true)2const [bluetooth, setBluetooth] = createSignal(false)3const [notifications, setNotifications] = createSignal(true)45<div class="space-y-4">6 <div class="flex items-center justify-between">7 <span>Wi-Fi</span>8 <Switch checked={wifi()} onCheckedChange={setWifi} />9 </div>10 <div class="flex items-center justify-between">11 <span>Bluetooth</span>12 <Switch checked={bluetooth()} onCheckedChange={setBluetooth} />13 </div>14 <div class="flex items-center justify-between">15 <span>Notifications</span>16 <Switch checked={notifications()} onCheckedChange={setNotifications} />17 </div>18</div>#API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | false | Whether the switch is checked. |
| disabled | boolean | false | Whether the switch is disabled. |
| onCheckedChange | (checked: boolean) => void | - | Event handler called when the switch state changes. |