A titled run of panel controls
The section groups the inspector controls of a tool panel or settings rail under a header that collapses them. Stacked sections are divided by a hairline, and the body stacks its controls one rhythm apart. The section is the home of the inspector slider, input, toggle switch, segmented control and dropdown, each a one-row control with its name inside the bar.
A composed panel
A rail of stacked sections using every control in the family at the compact size, beside a compact Button, which shares the bars’ height and shape. Open the headings dropdown to see its menu open past the section’s edge.
Open and closed
Use defaultOpen to seed an uncontrolled section, or open with onOpenChange to control it. A closed body is inert, so its controls leave the tab order rather than sitting focusable at zero height.
Default size controls
Every control takes the same size prop as Button. Compact suits a narrow rail; the default size suits a wider panel or a touch screen.
When to use it
Use the inspector section to group the controls of a dense settings panel. Unlike Accordion, its open body does not clip, so a dropdown menu inside can open past the section’s edge. For bordered panels of general content, such as an FAQ, use Accordion instead.
// From the npm package
import { InspectorSection } from 'rift-ds/components/InspectorSection/InspectorSection';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/inspector-section.json