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.
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.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 | — |