import { Accordion } from '@uhg-abyss/mobile';<Accordion> <Accordion.Item value="sandbox-1" label="Sandbox Accordion 1"> SURPRISE - Sandbox Accordion 1 </Accordion.Item>
<Accordion.Item value="sandbox-2" label="Sandbox Accordion 2"> SURPRISE - Sandbox Accordion 2 </Accordion.Item>
<Accordion.Item value="sandbox-3" label="Sandbox Accordion 3"> SURPRISE - Sandbox Accordion 3 </Accordion.Item></Accordion>Type Multiple
Use the type property to set the Accordion to either have single or multiple open items. The default is set to single.
Default Value - Single
Use the defaultValue property to set an initial Accordion to be open based on its value property. When type is set to single pass in a string.
Default Value - Multiple
When the type of the Accordion is set to multiple pass in a string array.
Collapsible
The isCollapsible property allows closing content when clicking the trigger for an open item. When true you are allowed to collapse all items. When false one item will always remain open. The default is set to true. Collapsible does not apply when the type is "multiple".
Disabled
Use the isDisabled property to disable the entire Accordion or individual levels. The default is set to false.
Border Variants
Accordion borders can be manipulated using the below props:
hideBorderTop | hides the border at the top of the accordion.
hideBorderBottom | hides the border at the bottom of the accordion.
hideBorderAll | hides all borders in the accordion.
onValueChange
The onValueChange property is an event handler that is called when the expanded state of any item changes.
Accordion Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | The Accordion items to be displayed |
| defaultValue | string | array[string] | - | Used to set an initial item or items to be open |
| hideBorderAll | boolean | false | Hides the borders of the Accordion |
| hideBorderBottom | boolean | false | Hides the border at the bottom of the Accordion |
| hideBorderTop | boolean | false | Hides the border at the top of the Accordion |
| isCollapsible | boolean | true | Used to enable/disable the ability to collapse all Accordion items |
| isDisabled | boolean | false | disables the Accordion so that none of the Accordion items can be opened |
| onValueChange | function | - | Event handler called when the expanded state of an item changes |
| type | 'single' | 'multiple' | single | Used to set the amount of items able to be opened at one time |
Accordion.Item Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | The Text to be displayed on an expanded Accordion item |
| hideBorderAll | boolean | false | Hides the borders of the current accordion item |
| hideBorderBottom | boolean | false | Hides the border at the bottom of the current accordion item |
| hideBorderTop | boolean | false | Hides the border at the top of the current accordion item |
| isDisabled | boolean | false | disables the individual Accordion Item so that it can't be opened |
| label | string | - | Sets the label of the Accordion item |
| value | string | - | Used to set the value of the Accordion item |
Accordion Classes
| Class Name | Description |
|---|---|
| abyss-accordion-root | Accordion root element |
Accordion.Item Classes
| Class Name | Description |
|---|---|
| abyss-accordion-content | Accordion content |
| abyss-accordion-item-root | Accordion item root element |
| abyss-accordion-label | Accordion label element |
| abyss-accordion-text | Accordion content text |
| abyss-accordion-trigger | Accordion item content |
| abyss-accordion-trigger-icon | Accordion item icon |
Accordion Tokens
| Token Name | Value | |
|---|---|---|
| accordion.color.surface.container | #FFFFFF | |
| accordion.color.border.container | #CBCCCD | |
| accordion.color.icon.utility.rest | #4B4D4F | |
| accordion.color.icon.utility.disabled | #929496 | |
| accordion.color.text.heading.rest | #4B4D4F | |
| accordion.color.text.heading.disabled | #929496 | |
| accordion.color.text.paragraph | #4B4D4F | |
| accordion.border-width.vertical.container | 0.5 | |
| accordion.sizing.all.icon.utility | 24 | |
| accordion.spacing.padding.horizontal.header | 16 | |
| accordion.spacing.padding.horizontal.content | 16 | |
| accordion.spacing.padding.vertical.header | 24 | |
| accordion.spacing.padding.bottom.content | 16 | |
| accordion.spacing.gap.horizontal.header | 16 | |
| accordion.spacing.gap.vertical.content | 16 |