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.
The import and the props worth knowing about, in one place.
import { InspectorInput } from "@/components/beste/component/inspector-input";
// Uncontrolled
<InspectorInput label="Class name" defaultValue="hero-section" placeholder="Optional" />
// Controlled, with a separate commit for expensive work
<InspectorInput
label="Alt text"
value={alt}
onValueChange={setAlt} // every keystroke
onValueCommit={(value) => console.log("persist", value)} // Enter or blur, if it changed
/>
// A number with its unit; spinners are hidden and the value goes monospace
<InspectorInput label="Offset" type="number" suffix="px" defaultValue="24" />
<InspectorInput
label="Link"
type="url"
align="start" // "end" (default) tucks short values right; "start" suits long ones
icon={Link2} // optional leading icon
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
placeholder="https://"
value={href}
onValueChange={setHref}
/>
// Read-only, and taking part in a form
<InspectorInput label="Slug" name="slug" value={slug} onValueChange={setSlug} />
<InspectorInput label="Id" value={block.id} readOnly />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.
| Enter | Commit the value. It does not submit the surrounding form: a settings row is rarely the only field in one. |
|---|---|
| Escape | Put the last committed value back. |
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. |
value | string | — | Controlled value. Pair it with `onValueChange`. |
defaultValue | string | — | Initial value in uncontrolled mode. |
onValueChange | (value: string) => void | — | Fires on every keystroke. |
onValueCommit | (value: string) => void | — | Fires once the edit is finished — Enter, or leaving the field — and only when the value actually changed. Use it for work too expensive to run per keystroke, such as a request or a re-render of something heavy. |
placeholder | string | — | Ghost text shown while the field is empty. |
type | "text" | "number" | "email" | "url" | "tel" | "password" | "search" | "text" | Input type. `number` also hides the spinners and switches the on-screen keyboard to a numeric one. |
suffix | string | — | Muted unit after the value, e.g. "px", "%", "ms". |
align | "start" | "end" | "end" | Which end the text sits at. Short values read better tucked against the right, the way the rest of the family shows a value; long ones, a URL say, are easier to follow from the left. |
maxLength | number | — | |
disabled | boolean | — | Block interaction and dim the row. |
readOnly | boolean | — | Show the value but refuse edits. |
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 of the input, so the row can take part in a form. |
id | string | — | Id of the input. The row is a `<label>`, so this is only for outside use. |
className | string | — | |
aria-label | string | — | Accessible name. Falls back to the visible label. |