Switch
An immediate on or off for a setting that applies without a save.
@luc/uiExamples
On and off
A switch applies immediately and saves nothing by itself — that is the difference between it and a checkbox inside a form.
<Switch aria-label="Auto-apply patches" defaultChecked />Two sizes
`sm` is for a dense settings row; `md` is the default beside a label.
<Switch aria-label="Small switch" size="sm" defaultChecked />With a label and a description
The label and description are part of the control: clicking the text toggles it, and a reader hears both.
Runs without asking when a new revision is published.
<Switch
label="Auto-apply patches"
description="Runs without asking when a new revision is published."
defaultChecked
/>Disabled
A disabled switch still states its value — the control is unavailable, not the fact.
<Switch label="Managed by your workspace" disabled defaultChecked />Usage
import { Switch } from "@luc/ui";<Switch label="Auto-apply patches" defaultChecked />Package setup — peer requirements, the stylesheet and the provider — is on installation.
API
Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.
| Export | Kind | Signature |
|---|---|---|
Switch | 8 documented props | ({ className, label, description, size, id, disabled, ...props }: SwitchProps) => import("@types/react").JSX.Element |
Switch props
Type: SwitchProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
asChild?inherited | boolean | undefined | — | |
checked?inherited | boolean | undefined | — | |
defaultChecked?inherited | boolean | undefined | — | |
description? | ReactNode | — | |
label? | ReactNode | — | |
onCheckedChange?inherited | ((checked: boolean) => void) | undefined | — | |
required?inherited | boolean | undefined | — | |
size? | "sm" | "md" | undefined | — |
Guidelines
Do
- Use a switch for a setting that takes effect immediately and needs no save button.
- Put the setting's name in `label` and the consequence in `description`: both are part of the control.
- Use `sm` only in a dense settings row; `md` is the size a form expects.
Don't
- Use a switch inside a form that has a submit button — that is a checkbox, and the reader expects to commit it.
- Relabel the switch instead of flipping it; the state is `aria-checked`, not the words beside it.
- Leave a switch unlabelled and hope the surrounding row explains it.
Accessibility
`role="switch"` reports `aria-checked`, and Space or Enter toggles it. The `md` track is 22 px tall and the `sm` one 16 px, so both keep a 24 px target through the shared hit-area utility rather than by growing the control.
Family
Forms
Inputs, their validation surfaces and the form lifecycle around them.
24 documented entries in this family. Open the family index
Related