Accordion
Installation
yarn add @spark-web/accordionAccordions are a set of vertically stacked headings which can be toggled to reveal some associated section of content.
Example
Props
Accordion
The root of the accordion block containing all parts of the accordion.
| Prop | Type | Description |
|---|---|---|
type | "single" | "multiple" | |
collapsible? | boolean | Whether an accordion item can be collapsed after it has been opened. Default: |
defaultValue? | string | string[] | The value of the item whose content is expanded when the accordion is initially rendered. Use `defaultValue` if you do not need to control the state of an accordion. The value of the items whose contents are expanded when the accordion is initially rendered. Use `defaultValue` if you do not need to control the state of an accordion. |
disabled? | boolean | Whether or not an accordion is disabled from user interaction. @defaultValue false |
onValueChange? | ((value: string) => void) | ((value: string[]) => void) | The callback that fires when the state of the accordion changes. |
value? | string | string[] | The controlled stateful value of the accordion item whose content is expanded. The controlled stateful value of the accordion items whose contents are expanded. |
Additional div props are passed to the primitive
radix accordion root
component and are not listed.
AccordionItem
An accordion item section containing heading and collapsible content.
| Prop | Type | Description |
|---|---|---|
label | string | The heading of the accordion item. |
value | string | A string value for the accordion item. All items within an accordion should use a unique value. |
background? | "body" | "input" | "disabled" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "backdrop" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | ... 23 more ... | "positiveMuted" | background colour of the component. Default: |
data? | DataAttributeMap | Sets data attributes on the component. |
headingElement? | "h2" | "h3" | "h4" | The html element to render the accordion item heading as. Default: |
level? | "1" | "2" | "3" | "4" | The size of the heading. '1' is largest and '4' is smallest. |