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.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-segmentedNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { InspectorSegmented } from "@/components/beste/component/inspector-segmented";
// A boolean that reads better named than toggled
<InspectorSegmented
label="Dark Mode"
options={[{ value: "off", label: "Off" }, { value: "on", label: "On" }]}
value={darkMode ? "on" : "off"}
onValueChange={(value) => setDarkMode(value === "on")}
/>
// Plain strings when the value is the text
<InspectorSegmented label="Fit" options={["Cover", "Contain"]} defaultValue="Cover" />
// Icons alone, for choices a word would only slow down
<InspectorSegmented
label="Align"
options={[
{ value: "left", icon: AlignLeft },
{ value: "center", icon: AlignCenter },
{ value: "right", icon: AlignRight },
]}
value={align}
onValueChange={setAlign}
/>
<InspectorSegmented
label="Direction"
icon={MoveHorizontal} // optional leading icon
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
options={[
{ value: "row", label: "Row" },
{ value: "column", label: "Column" },
{ value: "grid", label: "Grid", disabled: true },
]}
value={direction}
onValueChange={setDirection}
/>
// The segments are radios, so arrow keys move the selection and `name` submits
<InspectorSegmented label="Theme" name="theme" options={["System", "Light", "Dark"]} />Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorSegmented } from "@/components/beste/component/inspector-segmented";
<InspectorSegmented
label="Dark Mode"
className="w-72"
options={[{"value":"off","label":"Off"},{"value":"on","label":"On"}]}
defaultValue="off"
/>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.
| Arrow keys | Move through the segments; the value follows as you go. |
|---|---|
| Home / End | Jump to the first or the last segment. |
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. |
options | (string | InspectorSegmentedOption)[] | — | The choices. Plain strings are enough when the value is the text. Two to four segments is the range this reads well at; past that reach for inspector-select. |
value | string | — | Controlled value. Pair it with `onValueChange`. |
defaultValue | string | — | Initial value in uncontrolled mode. Falls back to the first option. |
onValueChange | (value: string) => 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 shared by the underlying radios, so the row can take part in a form. |
className | string | — | |
aria-label | string | — | Accessible name for the group. Falls back to `label`. |
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 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.
Settings row for a border: the row draws one exactly as described beside a summary of it, and opens an editor with the sides as icon toggles and the width, style and colour under them, each one a row of the family.
Settings row for a point on a surface: the row names the nine spots CSS names and shows the rest as two percentages, and opens a square pad the point is dragged around, with the thirds drawn on it and a pull towards them.