The family's escape hatch: label on the left, whatever you hand it on the right, and the same surface, metrics and focus ring as every other row, so a control the family does not have yet still looks like it belongs.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-rowNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { InspectorRow } from "@/components/beste/component/inspector-row";
// A bespoke control that still sits in the drawer like the real rows
<InspectorRow label="Preset">
<MyPresetPicker className="ml-auto" />
</InspectorRow>
// Naming the control inside makes a press on the label reach it, the way it does
// everywhere else in the family
<InspectorRow label="Slug" htmlFor="slug">
<input id="slug" className="ml-auto bg-transparent text-right text-sm outline-none" />
</InspectorRow>
// A control that cannot be one line tall
<InspectorRow label="Schedule" multiline>
<MyCalendar />
</InspectorRow>
<InspectorRow
label="Anything"
icon={SlidersHorizontalIcon} // optional leading icon
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
disabled
>
<span className="ml-auto text-sm">Read only</span>
</InspectorRow>
// Reach for it to place a one-off control, not to build the next row type: a row
// that owns its value can do things a wrapper cannot, starting with knowing what a
// press on its label should mean.Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorRow } from "@/components/beste/component/inspector-row";
<InspectorRow
label="Custom"
children="Whatever you put here"
/>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. |
children | React.ReactNode | — | The control. Anything at all: this row makes no assumptions about it. |
htmlFor | string | — | Id of the control inside, which makes the label name it: a press on the label then reaches the control the way it does in the rest of the family. |
multiline | boolean | — | Let the row grow past one line, for a control that cannot be one line tall. The label then sits at the top rather than centred against it. |
disabled | boolean | — | Dim the row. What is inside it stays the caller's business. |
tone | "muted" | "outline" | "ghost" | "muted" | Surface treatment: filled (default), hairline outline, or bare until hover. |
size | "sm" | "default" | "lg" | "default" | Row height preset. |
className | string | — |
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 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 family's block row: the same surface and tones, but the label sits above a multi-line field whose height comes from the text, with a character count whenever there is a limit to see. Collapsible, so a paragraph written once can be folded down to the height of a row without leaving the form.
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.
The row that does something instead of holding something: open a sub-panel, replace an asset, regenerate a key, delete the section. It carries a description, a hint, a busy spinner and a destructive treatment, and renders as a plain anchor when given an href.
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.