Behavior
Single Select
A single select collapsible allows only one option to be open at a time. Selecting an option both opens the selected option and closes the previously selected option (if a previously selected option exists). A single select collapsible allows one option to be open by default, or all options to be closed by default.
Multiselect
A multiselect collapsible allows several options to be open at a time. A selection to open or close an option only affects the selected option. A multiselect collapsible allows zero, one, or many options to be open by default.
Props
AccordionSystem Props
Accordion composes Collapsible
COMMONTYPOGRAPHYBORDERLAYOUTPOSITIONFLEXGRID- Learn More
| Name | Type | Description |
size | "small" | "medium" | "large" | Size of accordion medium |
gradient | ResponsiveValue<TLengthStyledSystem, Required<Theme<TLengthStyledSystem>>> | - |
defaultOpenIndices | number[] | Default open panel indices. If allowMultiple is false, will use the first index [] |
openIndices | number[] | Use for controlled accordion. If this is set, allowMultiple and defaultOpenIndices will be ignored |
isCollapsible | boolean | If true, will allow all panels to be collapsed. By default, one panel must
always be open. false |
allowMultiple | boolean | If true, will allow multiple panels to be open at once. By default, only
one can be open at any time. false |
AccordionItemSystem Props
COMMONTYPOGRAPHYBORDERLAYOUTPOSITIONFLEXGRID- Learn More
| Name | Type | Description |
onToggle | (status: ToggleType) => void | Callback when toggled |
gradient | ResponsiveValue<TLengthStyledSystem, Required<Theme<TLengthStyledSystem>>> | - |
isDisabled | boolean | Disable trigger item if true |
AccordionTriggerSystem Props
Renders an unstyled button
COMMONBORDER- Learn More
| Name | Type | Description |
AccordionPanelSystem Props
COMMONTYPOGRAPHYBORDERLAYOUTPOSITIONFLEXGRID- Learn More
| Name | Type | Description |
gradient | ResponsiveValue<TLengthStyledSystem, Required<Theme<TLengthStyledSystem>>> | - |
collapsedHeight | TLengthStyledSystem | Height (in px if number) when panel is closed |
animateOpacity | boolean | Adds a fade effect |
Accessibility
- Once focused on a trigger,
ArrowUpandArrowDowncan be used to navigate through items.Tabbehaves as normal