Accordions
Accordion
The accordion component allows the user to show and hide sections of related content on a page. Accordions can be stand-alone or can be stacked.
Prop | Type | Default value |
|---|---|---|
Prop title * | Type string | Default value |
Prop size | Type "sm", "md", "lg" | Default value "md" |
Prop gap | Type "sm", "md", "lg" | Default value "md" |
Prop color | Type "default", "link" | Default value "default" |
Prop fillWidth | Type boolean | Default value false |
* denotes required field
MultiAccordion
The MultiAccordion component is designed for step-by-step tasks, such as checklists. It builds on the regular accordion with features like marking items as complete and automatically closing completed sections.
Prop | Type | Default value |
|---|---|---|
Prop type | Type "single", "multiple" | Default value "single" |
Prop size | Type "sm", "md", "lg" | Default value "md" |
Prop showBorder | Type boolean | Default value true |
Prop showCheck | Type boolean | Default value false |
Prop fillWidth | Type boolean | Default value false |
Prop markAsCompleted | Type function | Default value |
MultiAccordion.item
The item within the MultiAccordion component can also be modified. State, icons, and size can be easily set.
Prop | Type | Default value |
|---|---|---|
Prop title * | Type string | Default value |
Prop color | Type "default", "link" | Default value "default" |
Prop gap | Type "sm", "md", "lg" | Default value "md" |
Prop icon | Type | Default value |
Prop iconSize | Type "xs", "sm", "md", "lg", "xl", "xxl" | Default value "md" |
Prop fillWidth | Type boolean | Default value false |
* denotes required field
Last updated on