Spec

A row-per-entry primitive for fields that collapse to a summary and expand to detail.

Anatomy

Use it for props, params, fields, or schema attributes. Anything that fits a row-per-entry shape. The cols prop on Spec defines a shared grid template that the header, each item's trigger, and any inner SpecField rows align to.

TSX


API


Reference for each part of the component, including its available props and behavior.


Spec


Root container. The cols prop sets a shared grid template so the header, each item's trigger, and each field row align to the same columns.


Prop


SpecHeader


Column-label row at the top. Inherits the grid layout from Spec so header cells line up with each item's trigger cells. Reserves a trailing chevron-sized spacer to keep alignment with rows below.


Prop


SpecItem


A single collapsible entry. Exposes a data-open attribute that drives a highlighted background and border in the open state.


Prop


SpecTrigger


Clickable summary row that toggles the item. Lays out children using the shared grid, and shows a chevron that rotates when open.


Prop


SpecContent


Expanded panel. Animates open and close with a smooth height transition.


Prop


SpecField


A label/value row inside SpecContent. Inherits the same grid template as the trigger so values align under the corresponding column. Reserves the trailing chevron-sized spacer so column 2 lines up exactly with the summary row above.


Prop


SpecFieldLabel


First-column label inside a SpecField. Muted by default. Override with className.


Prop


SpecFieldValue


Value cell inside a SpecField. Spans grid columns 2 through the last column so it works regardless of how many columns Spec is configured with.


Prop