Inspector Code

About this component

Settings block for a snippet: a monospaced field with a language chip and a line count, Tab indenting instead of leaving, and a fixed height so a pasted stylesheet cannot push the rest of the drawer out of reach. Collapsible, since a snippet is the tallest thing in a drawer and the least often touched; folded, it measures exactly what a row measures and still reports its line count.

Usage

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

import { InspectorCode } from "@/components/beste/component/inspector-code";

// Uncontrolled
<InspectorCode label="Custom CSS" language="css" defaultValue=".hero { letter-spacing: -0.02em; }" />

// Folded away when it is not being edited. Closed, the block measures exactly what a
// row of the family measures, and its header still says how many lines are in there.
<InspectorCode
  label="Custom CSS"
  language="css"
  collapsible
  defaultOpen={false}
  onOpenChange={(open) => console.log("open:", open)}
/>

// Controlled, with a separate commit for expensive work
<InspectorCode
  label="Custom CSS"
  language="css"
  value={css}
  onValueChange={setCss}
  onValueCommit={(value) => compile(value)}
/>

<InspectorCode
  label="Transition SVG"
  icon={CodeIcon}     // optional leading icon
  tone="outline"      // "muted" (default) | "outline" | "ghost"
  size="sm"           // "sm" | "default" | "lg"
  language="svg"
  rows={10}           // lines it opens at; it scrolls past this rather than growing
  wrap                // let long lines wrap instead of scrolling sideways
  maxLength={4000}
  placeholder="<svg viewBox=..."
  value={svg}
  onValueChange={setSvg}
/>

// Read but not edit
<InspectorCode label="Generated" language="json" value={JSON.stringify(config, null, 2)} readOnly />

// The language chip is a sign, not a parser: nothing here validates against it.
// Tab indents by two spaces and Escape leaves the field, so the keyboard is never
// actually trapped.

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.

Tab	Inserts an indent instead of leaving the field, which is what a code box has to do.
Escape	Blurs the field, so the drawer around it gets the keyboard back.
The header	Folds the block away while collapsible, leaving the label and the line count.

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`label`*	`string`	—	Label rendered above the field, inside the block.
`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 — leaving the field — and only when the value actually changed. Use it for work too expensive to run per keystroke.
`language`	`string`	—	What this is, shown as a chip beside the label: `css`, `html`, `svg`, `json`. It is a sign, not a parser — nothing here validates against it.
`placeholder`	`string`	—	Ghost text shown while the field is empty.
`rows`	`number`	`6`	Lines the field opens at. It scrolls past this rather than growing, because a pasted stylesheet would otherwise push the whole drawer out of reach.
`collapsible`	`boolean`	—	Let the block be folded away, leaving its header. A snippet is the tallest thing in a drawer and usually the least often touched, so the panel around it is mostly a scroll past something nobody is editing.
`open`	`boolean`	—	Controlled open state. Pair it with `onOpenChange`.
`defaultOpen`	`boolean`	`true`	Whether it starts open in uncontrolled mode.
`onOpenChange`	`(open: boolean) => void`	—
`wrap`	`boolean`	—	Let long lines wrap instead of scrolling sideways.
`maxLength`	`number`	—	Longest the value may be.
`disabled`	`boolean`	—	Block interaction and dim the block.
`readOnly`	`boolean`	—	Show the code but refuse edits.
`tone`	`"muted" \| "outline" \| "ghost"`	`"muted"`	Surface treatment: filled (default), hairline outline, or bare until focus.
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Padding preset.
`name`	`string`	—	Name of the field, so the block can take part in a form.
`id`	`string`	—	Id of the field. One is generated when it is not given.
`className`	`string`	—
`aria-label`	`string`	—	Accessible name. Falls back to the visible label.

More Inspector components

View all Inspector

landing pagesaaspricing

Rows of the family go here

One under another