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" },
]}
/>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 | — |