Components
Accordion
Play around with props, edit and copy code.
Properties
Accordion
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| branding | union | 'default' | Custom branding. Built in support for default and inverted |
| customer | enum | 'neutral' | Neutral, tur or sport. |
| isFlat | bool | false | Flat accordion - No borders. No shadow. |
| children | node | AccordionItems | |
| className | string | Custom classes |
AccordionItem
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| customer | string | 'neutral' | |
| children | node | AccordionSummary and AccordionDetails | |
| className | string | Custom classes | |
| id | string | Id, if non is specified a unique id will be generated and used | |
| index | number | Autogenerated from parent component. | |
| isExpanded | bool | If item is expanded. | |
| isFlat | bool | Autogenerated from parent component. | |
| onChange | func | Callback that runs on click / change. |
AccordionSummary
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| children | node | Content. | |
| className | string | Custom classes. | |
| onChange | func | Callback that runs on click / change. | |
| onKeyDown | func |
AccordionDetails
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| children | node | Content. | |
| className | string | Custom classes. | |
| expanded | bool | Set true to expand accordion details. | |
| hasListGroup | bool | Set true if accordion details contains a svs-ui list-group. | |
| id | string | Id, if non is specified a unique id will be generated and used. |
Accessibility
This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.
