Inspector Corners

About this component

Settings row for the four corners of a box: the row carries a border-radius shorthand summary and a glyph rounded to match, and opens a square where each field sits on the corner it rounds.

Usage

The import and the props worth knowing about, in one place.

import { InspectorCorners } from "@/components/beste/component/inspector-corners";

// Uncontrolled. The row reads "12 12 4 4 px"; the link toggle in the middle of the
// square starts on when all four corners already match.
<InspectorCorners label="Radius" defaultValue={{ topLeft: 12, topRight: 12, bottomRight: 4, bottomLeft: 4 }} suffix="px" />

// Controlled, with a separate commit for expensive work
<InspectorCorners
  label="Radius"
  value={radius}
  onValueChange={setRadius}                             // every accepted keystroke
  onValueCommit={(value) => console.log("persist", value)} // Enter or blur
  max={48}
  step={2}
  suffix="px"
/>

<InspectorCorners
  label="Corners"
  icon={Squircle}        // optional leading icon
  linked={linked}        // take the link state over, if it belongs to your state
  onLinkedChange={setLinked}
  onOpenChange={(open) => console.log("editor open:", open)}
  tone="outline"         // "muted" (default) | "outline" | "ghost"
  size="sm"              // "sm" | "default" | "lg"
  value={radius}
  onValueChange={setRadius}
/>

// Always four corners, no tie-together toggle
<InspectorCorners label="Radius" hideLink value={radius} onValueChange={setRadius} />

Keyboard and gestures

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.

Arrow Up / Down	One step on the focused corner.
Shift + Arrow	Ten steps.
Enter	Accept what was typed into the field.
Escape	Throw the draft away and put the committed value back.
The link toggle	Ties the four corners together; typing into one then writes all four.

Props

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`	`Partial<Record<CornerKey, number>>`	—	Controlled value. Pair it with `onValueChange`.
`defaultValue`	`Partial<Record<CornerKey, number>>`	—	Initial value in uncontrolled mode.
`onValueChange`	`(value: CornersValue) => void`	—	Fires on every accepted keystroke and every step.
`onValueCommit`	`(value: CornersValue) => void`	—	Fires once an edit is finished — Enter, or leaving a field.
`onOpenChange`	`(open: boolean) => void`	—	Fires when the editor opens or closes.
`min`	`number`	`0`	Smallest radius a corner may hold.
`max`	`number`	`999`	Largest radius a corner may hold.
`step`	`number`	`1`	Amount one arrow key press moves a corner.
`suffix`	`string`	—	Muted unit after the summary, e.g. "px", "rem".
`defaultLinked`	`boolean`	—	Start with the corners tied together. Defaults to on when the incoming value already has four equal corners, which is the usual starting point.
`linked`	`boolean`	—	Controlled link state, if the toggle belongs to your own state.
`onLinkedChange`	`(linked: boolean) => void`	—
`hideLink`	`boolean`	—	Drop the link toggle and always edit the four corners separately.
`disabled`	`boolean`	—	Block interaction and dim the row.
`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`	—
`aria-label`	`string`	—	Accessible name for the group. Falls back to `label`.

More Inspector components

View all Inspector

Dark Mode

OffOn