Settings row with a label on the left and a switch on the right, sharing the family's pill: the label takes the row's spare width, so a press almost anywhere toggles it.
The import and the props worth knowing about, in one place.
import { InspectorSwitch } from "@/components/beste/component/inspector-switch";
// Uncontrolled
<InspectorSwitch label="Parallax" defaultChecked />
// Controlled. The props are named after the switch, not the family's `value`,
// because that is what every other switch already speaks.
<InspectorSwitch
label="Show captions"
checked={captions}
onCheckedChange={setCaptions}
/>
<InspectorSwitch
label="Reduce motion"
icon={Accessibility} // optional leading icon
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
checked={reduced}
onCheckedChange={setReduced}
/>
// Disabled, and taking part in a form
<InspectorSwitch label="Autoplay" checked={autoplay} onCheckedChange={setAutoplay} disabled={isLocked} />
<InspectorSwitch label="Marketing emails" name="marketing" defaultChecked={false} />Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Space / Enter | Flip it. The switch is a button, so both keys work on it. |
|---|---|
| Click anywhere in the row | The label owns the row's spare width and points at the switch by id, so the target is the whole row rather than the track at its end. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Label rendered on the left, inside the row. |
icon | LucideIcon | — | Optional leading icon shown before the label. |
checked | boolean | — | Controlled state. Named after the switch rather than the family's `value`, because every switch in this codebase already speaks `checked`/`onCheckedChange`. |
defaultChecked | boolean | — | Initial state in uncontrolled mode. |
onCheckedChange | (checked: boolean) => void | — | |
disabled | boolean | — | Block interaction and dim the row. |
tone | "muted" | "outline" | "ghost" | "muted" | Surface treatment: filled (default), hairline outline, or bare until hover. |
size | "sm" | "default" | "lg" | "default" | Row height preset. |
name | string | — | Name of the underlying control, so the row can take part in a form. |
id | string | — | Id of the switch. Generated when omitted, to tie the label to it. |
className | string | — | |
aria-label | string | — | Accessible name. Falls back to the visible label. |