Anatomy
Note: Image is not to scale
- Header (text label)
- Panel (text or mixed content)
- Icon (state indicator e.g., Expanded, Collapsed)
- Divider
Options
Density: Default
By default, accordion items are styled with a padding value that is appropriate for most use-cases.
Density: Compact
"Compact" density applies a minimal amout of padding to the accordion item, producing a slimmer footprint that takes up less visual space.
Density: Loose
"Loose" density applies a generous amount of padding to the accordion item, producing a larger footprint that occupies more visual space.
Behavior
Collapsed
Each accordion item consists of two main parts - the header, or item title and the panel, or item content. In the collapsed state, only the header is visible. When collapsed, the chevron icon also points down to provide a visual signal for revealing additional information. By default, all items in the accordion are displayed in the collapsed state unless otherwise specified.
Expanded
Users can access additional information by clicking or tapping the accordion item to reveal the expanded state. In the expanded state, the panel is displayed directly below the header. The chevron icon points up to indicate the current state and to provide a visual signal for returning the accordion item to its collapsed state.
Hover
When the accordion item is hovered over, the background of the header changes color to provide visual feedback and to signal the item is clickable.
Focus / Keyboard interaction
The accordion component is accessible via keyboard interaction. The "tab" key can be used to navigate items from top to bottom. The item currently in focus is denoted by a blue outline, using the CSS outline property. Pressing the "enter" ("return") key will expand or collapse the item in focus.
Disabled
The purpose of the accordion is to act as a container and visual interface for displaying static information upon user interaction. It is not intended to be used as an input element or form field. The accordion component does not require conditional logic to achieve its functionality and therefore does not feautre a special disabled state or possess any manner of error-handling. If visual feedback for a disabled state is desired, consider using the [.not-allowed] CSS property.
Guidance
Font family overrides
By default, the accordion component uses "Franklin Light" as its primary font for both the header and panel - however, font family overrides are premitted depending on the use-case. Below, the header has been set in "Postoni".
Font size overrides
The accordion component uses "size100" as its default font size. If a larger font size is desired, be mindful in choosing a size that is suitable for the use-case and appropriate for the space available. Avoid using font sizes that are excessively small or large, which may negatively affect your layout.
Don't split or truncate content
The header of the accordion should be a complete sentence or statement. It should not start in the header and continue in the panel.
API Reference
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| density | Trigger only. By default, accordion items are styled with a padding value that is appropriate for most use-cases. You can use compact or loose for smaller or larger padding. | enum ACCORDION_DENSITY.compact | ACCORDION_DENSITY.loose | ACCORDION_DENSITY.default | ACCORDION_DENSITY.default | False |
| type | Determines whether one or multiple items can be opened at the same time. | enum ACCORDION_TYPE.single | ACCORDION_TYPE.multiple | ACCORDION_TYPE.single | True |
| value | type='single' ONLY. A unique value for the item. Used with defaultValue | string | True | |
| defaultValue | type='single' ONLY. Determines which item should be expanded on render. Should match one of the values | string | False | |
| onValueChange | type='single' ONLY. Event handler called when the expanded state of an item changes | function | False | |
| value | type='multiple' ONLY. A unique value for the item. Used with defaultValue | string[] | [] | True |
| defaultValue | type='multiple' ONLY. Determines which item should be expanded on render. Should match one of the values | string[] | [] | False |
| onValueChange | type='multiple' ONLY. Event handler called when the expanded state of an item changes | function | False | |
| collapsible | type='single' ONLY. Allows items to collapse after they're expanded | boolean | false | False |
| disabled | When true, prevents the user from interacting with the accordion and all its items. If added to the root, the whole accordion will be disabled. If added to an item, the item will be disabled. | boolean | false | False |
| forceMount | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | boolean | false | False |
| asChild | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. | boolean | false | False |
| ref | A react reference | Reference | false | False |