A short list of named choices with one of them on: a plan, a studio look, a delivery option. Each row carries a label, a line saying what picking it means, and room for a state on the right, so a list of options worth reading does not have to hide in a menu.
The import and the props worth knowing about, in one place.
import { InspectorChoice } from "@/components/beste/component/inspector-choice";
// Controlled: the row that matches value is on, the rest answer hover
<InspectorChoice
aria-label="Plan"
value={plan}
onValueChange={(next) => console.log("plan", next)}
options={[
{ value: "free", label: "Free", description: "One site, community support" },
{ value: "pro", label: "Pro", description: "Unlimited sites, custom domains", badge: "Current" },
{ value: "agency", label: "Agency", description: "Twenty five sites and invites" },
]}
/>
// Two columns when the descriptions are a few words, not sentences
<InspectorChoice
aria-label="Delivery"
defaultValue="standard"
columns={2}
tone="ghost" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
options={[
{ value: "standard", label: "Standard", hint: "Free" },
{ value: "express", label: "Express", hint: "$12" },
]}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorChoice } from "@/components/beste/component/inspector-choice";
<InspectorChoice
aria-label="Plan"
defaultValue="pro"
className="w-80"
options={[{"value":"free","label":"Free","description":"One site, community support"},{"value":"pro","label":"Pro","description":"Unlimited sites, custom domains","badge":"Current"},{"value":"agency","label":"Agency","description":"Twenty five sites and invites"}]}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
options* | InspectorChoiceOption[] | — | The options, in the order they are listed. |
value | string | — | Controlled value. Pair it with `onValueChange`. |
defaultValue | string | — | Initial value in uncontrolled mode. |
onValueChange | (value: string) => void | — | |
aria-label | string | — | Accessible name for the group. There is no visible heading: a choice list sits under an inspector-group or a dialog title that already names it. |
columns | 1 | 2 | 1 | Lay the options out in two columns. One column reads better when the descriptions are sentences; two when they are a few words. |
disabled | boolean | — | Block interaction and dim the list. |
tone | "muted" | "outline" | "ghost" | "muted" | Surface treatment: filled (default), hairline outline, or bare until hover. |
size | "sm" | "default" | "lg" | "default" | Row height preset. A description makes a row taller than the preset; the preset is then the floor. |
className | string | — |
The choice that has to be seen to be made: a template, a layout, a chart type. Each option is a picture, normally a rendered screenshot passed as a URL, or markup for the choices no photograph would show. The row is the trigger, the grid is width-matched to it, and the captions under the pictures can be dropped for a set whose pictures say everything.
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.
Settings row that names the chosen icon and shows it on the right; pressing the row opens a searchable palette below it, width-matched to the row, with clearing offered at the foot of it. The icon set is passed in, so the row never bundles an icon library of its own.
The line of prose that belongs between rows: what a setting is for, why one is switched off, what a value will cost. Four tones, each with its own mark, and the same text size as the rows around it.
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.