Accordion
The accordion is a control element comprising a vertically stacked list of items, such as labels or thumbnails. Each item can be "expanded" or "collapsed" to reveal the content associated with that item. There can be zero expanded items, exactly one, or more than one item expanded at a time, depending on the configuration.
Figma Link
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=2315-72864
- Web Components
- Flutter
Demo
zeta-web v1.4.0
Web Components
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-accordion--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | children should be zeta-accordion-item elements. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| inCard | Determines if the ZetaAccordion should be in a card container. | boolean | false |
| expandMultiple | Determines if multiple items can be open at the same time.When false, only one accordion item can be open at a time. | boolean | false |
| selectMultiple | Determines if multiple accordion items can be selected. | boolean | false |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| rounded | Whether the component is rounded or sharp.When true, rounded will set the border radius of the first child, and any children with class 'contourable-target' to --radius-minimal.Otherwise, this value will be --radius-none. | boolean | undefined | true | Contourable |
Flutter component not available yet