Switch
Accessible toggle switch: role="switch" + aria-checked; native <button> gives Space/Enter keyboard handling for free.
Label it via aria-label or aria-labelledby (or a <Label for={id}> pointing at this id).
Forms · two-way: bind:checked · submits in a form with name · keyboard contract
<script lang="ts">
import { Switch } from '@l4st/driftwood';
</script>
| Light | Dark |
|---|---|
 |
 |
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
checked bind: |
boolean |
false |
Whether it is on. |
disabled |
boolean |
false |
Blocks toggling and drops it out of the form data. |
class |
string |
— | Merged with the component's own classes, last — so yours win. |
name |
string |
— | Submits with the form under this name when on. |
value |
string |
'on' |
The submitted value. Matches a native checkbox's default. |
onCheckedChange |
(checked: boolean) => void |
— | Fires with the new state on every toggle. |
Everything not listed above is spread onto the underlying element (HTMLButtonAttributes): aria-*, data-*, event handlers, and the rest of the native attributes.
Keyboard
| Key | Does |
|---|---|
| Enter / Space | toggle |
Example
The markup behind the screenshot above, lifted from src/routes/shots/ — so it
compiles, and it is exactly what produced the image.
<Label for="{uid}-notify">
<Switch id="{uid}-notify" bind:checked />
Email me when a scan finishes
</Label>
Forms · Field · Input · FileInput · FileList · Textarea · CodeEditor · Combobox · RadioGroup · NumberInput · InlineEdit · Label · Select · MultiSelect · DatePicker · TagsInput · Checkbox · Slider