AccordionItem
A heading, disclosure trigger, and retained panel inside Accordion.@gemologic/sheen · navigationPlayground
This example has no scalar controls. Its validated source remains interactive below.
<Accordion><AccordionItem value="details" label="Details">Section content</AccordionItem></Accordion>Variant matrix
Details section
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Accordion.tsx- Tokens
--sheen-color-fg--sheen-color-focus-ring--sheen-space-block-sm
Accessibility
Role: heading containing disclosure buttonKeyboard: Enter, Space, Tab, ArrowDown, ArrowUp, Home, EndDo
- Place inside Accordion and retain child ownership while content refreshes.
Do not
- Do not assume closing disables form submission or application effects.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
value * | string | — | Stable unique value identifying this section. |
label * | string | — | Visible heading-button label. |
disabled | boolean | false | Disable this trigger without changing its expanded state. |
headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Native heading level, from two through six. |