Accordion
import { Accordion } from '@enmovil/ui-design-system';
A set of collapsible panels built from an items list. Each panel header expands or collapses its content, and onChange reports the keys of the open panels.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
items | ItemType[] | undefined | Yes | — | — | The panels, in order. Each has a key, a label for its header and children for its content; all panels start collapsed. |
Events
| Name | Signature | When it fires |
|---|---|---|
onChange | (key: string | string[]) => void | Fires when a panel is expanded or collapsed, with the keys of the open panels. |
Children
Accordion does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.
Loading playground…
Storybook
Open Accordion in Storybook to try every story with the full set of controls.