v0.35.0
Accordion panels
are containers for content of relative importance to the user that can be selectively expanded or collapsed. They can be useful for reducing the content on a page & the cognitive load for the user.
An accordion panel
can display different types of content such as text, images, tables, media, buttons, etc. Components are added into the drop zone and render when the user expands the corresponding panel.
When to use:
Edit the code below to see your changes live!
function Example() {const { panels } = useAccordionPanel([{defaultExpanded: true,header: 'Panel Header',children: (<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Pulvinar mattis nunc sed blanditlibero volutpat. Eu lobortis elementum nibh tellus molestie nunc non.</Text>),},{header: 'Panel Header',children: (<Text>Nullam eleifend a lectus non consequat. Fusce non mauris at velit sodalesvenenatis vitae ut erat. In hac habitasse platea dictumst. Quisque venenatisturpis at dapibus posuere. Phasellus pulvinar velit id tellus luctus, acpharetra libero consequat.</Text>),},]);return <AccordionPanel header="Accordion Panel Header" panels={panels} />;}
Prop name | Type | Default | Description |
---|---|---|---|
panels * | AccordionProps[] |
| See Accordion for usage. |
header * | string |
| Defines the |
Props ending with * are required
Do |
---|
Choose meaningful headers that describe the content revealed on expand. |
Use the icon prop sparingly; an appropriate use would be the status of a task hidden in the accordion. |
Use accordions to present parallel content or like items. |
Limit the number of tasks hidden in each accordion to one. |
Start with all panels collapsed unless the user has been redirected to the content. |
Don't |
---|
Do not use accordions to hide important user tasks. |
Do not use the icon prop unless it provides benefit to the user. |
Do not nest accordions within accordions. |
Do not use an accordion to hide a singular piece of content. |