Accordion
Accordions display a list of high-level options that can expand/contract to reveal more detailed information.
Accessibility
tab
,shift + tab
- to switch between panels.space
orenter
- when focus is on the accordion panel header it will toggle (expand or collapse) the currently focused panel.
Examples
Accordion SEO Friendly
- Accordion panel 1Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.
- Accordion panel 2Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.
- Accordion panel 3Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.
If you want to control the expanded
state of the accordion panels yourself, you can use the stateless version of our accordion: StatelessAccordion
. You can pass a list of React keys to expanded
, which corresponds to the keys of the Panels
that you want to be expanded.
The onChange
handler is called when one of the Panels
would ordinarily be opened. It passes both the key
of the Panel
that caused the handler to fire as well as an updated expanded
list. You can choose to use the new expanded
list or key
however you like to update your state. Note, by default the new expanded
list will assume only one panel can be open at a time, but if you pass accordion={false}
the expanded
list will assume multiple can be open simultaneously.
The StatelessAccordion
gives you the flexibility to control the accordion as you like while still offering some convenience to cover the normal use cases.
API
Accordion props
Name | Type | Description |
---|---|---|
children | react node | An array of Panel components. |
disabled | boolean | Renders component in disabled state. |
onChange | function | Called when a panel is expanded. |
overrides | custom | Lets you customize all aspects of the component. |
Note: the Panel
has the same overrides as Accordion
, with the exception of the Root
subcomponent.
Accordion exports
You can import this module like so:
import {Accordion} from 'baseui/accordion'
It exports the following components or utility functions: