Accordion
Coordinates expansion and keyboard navigation for related disclosure sections.@gemologic/sheen · navigationPlayground
This example has no scalar controls. Its validated source remains interactive below.
<Accordion><AccordionItem value="general" label="General"><Input label="Name" /></AccordionItem></Accordion>Variant matrix
Settings sections
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Accordion.tsx- Tokens
--sheen-duration-normal--sheen-space-block-sm
Accessibility
Role: group of disclosure headingsKeyboard: Tab, Shift+Tab, Enter, Space, ArrowDown, ArrowUp, Home, EndDo
- Use stable, unique item values.
- Use a heading level appropriate to the surrounding document.
Do not
- Do not use an accordion as a tab interface or route navigation.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
value | string[] | — | Controlled expanded item values. |
defaultValue | string[] | — | Initially expanded uncontrolled item values. |
onValueChange | (value: string[]) => void | — | Requested expanded values; controlled owners may reject changes. |
multiple | boolean | false | Allow multiple sections to remain expanded. |
collapsible | boolean | true | Allow the selected single-mode section to close. |