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.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-switchNew here? Read the installation guide.
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} />Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorSwitch } from "@/components/beste/component/inspector-switch";
<InspectorSwitch
label="Auto layout"
defaultChecked
/>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. |
Settings row with a label on the left and a plain text field on the right, sharing the family's pill: the whole row is the label, so pressing anywhere puts the caret in the field.
Settings row holding a set of pills that are each on or off, so any number of them can be on at once: what inspector-segmented is for one choice out of several, this is for several choices at once, and what inspector-switch is for a single flag, this is for a handful that belong together.
Settings row whose choices sit side by side on the right, with a marker that slides between them: the readable alternative to a switch when the two states deserve names, and the compact one to a select at three or four options.
Settings row that pairs a label with its current choice inside one pill, opening a width-matched dropdown below: option icons, colour swatches, descriptions and grouped sections, on top of the accessible shadcn select.