Components / UI components / Data Display
Shared controlsExperimental alpha
Accordion
Progressive disclosure with consistent focus and icon controls.
Accordion preview
Search accounts in the selected workspace. No external changes will be made.
Interactions use local sample data.
Usage and props
Put supporting information in labelled panels. Keep approval scope and other decision details visible. Set an item’s keepMounted to true when closing it must preserve a local form draft. Keep decision-critical information visible outside collapsed sections.
type'single' | 'multiple'- Allow one or several panels to be open.
itemsAccordionItem[]- Stable value, title and content for each panel. Optional disabled and keepMounted flags. Titles must not contain buttons or links.
valuestring | string[] (optional)- Controlled open panel values; update them through onValueChange. Use defaultValue for local disclosure state.
headingLevel2 | 3 | 4 | 5 | 6 (optional)- Match the surrounding heading outline. Defaults to 3.
regionboolean (optional)- Use false for nested or repeated supporting panels to avoid excess region landmarks.
These are the main props for the example. The package's TypeScript declarations include the full API.