Inspector Group

About this component

The container the rows go in: a named, collapsible section that says what it is currently set to while it is closed, with an optional reset in its header. A drawer of twenty settings becomes a drawer of five groups.

Usage

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

import { InspectorGroup } from "@/components/beste/component/inspector-group";

// A section of rows
<InspectorGroup label="Layout">
  <InspectorSlider label="Gap" value={gap} onValueChange={setGap} />
  <InspectorSpacing label="Padding" value={padding} onValueChange={setPadding} />
</InspectorGroup>

// A closed group that says nothing about itself is a door with no sign on it
<InspectorGroup label="Padding" defaultOpen={false} summary={`${padding.top} ${padding.right} px`}>
  <InspectorSpacing label="Padding" value={padding} onValueChange={setPadding} />
</InspectorGroup>

// Reset belongs to the group, not to whichever row happens to be last
<InspectorGroup
  label="Typography"
  onReset={() => setType(defaults)}
  resetDisabled={isDefault}
>
  <InspectorSelect label="Family" options={families} value={family} onValueChange={setFamily} />
  <InspectorStepper label="Size" suffix="px" value={fontSize} onValueChange={setFontSize} />
</InspectorGroup>

<InspectorGroup
  label="Advanced"
  icon={SettingsIcon}     // optional leading icon
  tone="outline"          // "muted" (default) | "outline" | "ghost"
  size="sm"               // "sm" | "default" | "lg"
  open={open}             // controlled; pair with onOpenChange
  onOpenChange={setOpen}
  alwaysShowSummary       // keep the summary visible while open too
  summary="3 changed"
>
  <InspectorCode label="Custom CSS" language="css" value={css} onValueChange={setCss} />
</InspectorGroup>

// A section that is always open: the header becomes a heading rather than offering
// a gesture it will not answer
<InspectorGroup label="Identity" collapsible={false}>
  <InspectorInput label="Name" value={name} onValueChange={setName} />
</InspectorGroup>

// Rows inside a closed group are unmounted, not hidden: each one owns state and
// effects, and a drawer of twenty closed groups would otherwise pay for all of them.

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.

Enter / Space on the header	Open or close the group. The header is a button whenever `collapsible` is on.

Props

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

Prop	Type	Default	Description
`label`*	`string`	—	Name of the group, in its header.
`icon`	`LucideIcon`	—	Optional leading icon shown before the label.
`info`	`string`	—	A note the header does not have room for, behind a mark next to the label. For what the group is for, or what turning something in it on will cost — the kind of thing worth having but not worth a line of prose above every group. Anything a reader needs before they can answer a row belongs in that row's label instead.
`children`	`React.ReactNode`	—	The rows.
`summary`	`React.ReactNode`	—	What the group is currently set to, shown in the header while it is closed. A closed group that says nothing about itself is a door with no sign on it.
`alwaysShowSummary`	`boolean`	—	Keep the summary visible while the group is open too.
`open`	`boolean`	—	Controlled open state. Pair it with `onOpenChange`.
`defaultOpen`	`boolean`	`true`	Whether it starts open in uncontrolled mode.
`onOpenChange`	`(open: boolean) => void`	—
`collapsible`	`boolean`	—	Take away the disclosure: the header becomes a heading and the rows stay out.
`onReset`	`() => void`	—	Called by the reset button, which only appears when this is given. It sits in the header rather than under the rows, since it belongs to the group and not to whichever row happens to be last.
`resetDisabled`	`boolean`	—	Grey out the reset button, for a group already at its defaults.
`disabled`	`boolean`	—	Dim the whole group. What is inside stays the caller's business.
`tone`	`"muted" \| "outline" \| "ghost"`	`"muted"`	Surface treatment: filled (default), hairline outline, or bare.
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Padding and header height preset.
`className`	`string`	—

More Inspector components

View all Inspector

Dark Mode

OffOn