Accordions are most often used for hiding and showing sections of related content.
Overview
Accordions can have different selection modes, where users can have multiple or single Accordion Item(s) open.
Sample
Usage
- To organize related text-based information.
- To shorten pages and reduce scrolling when content is not crucial to read in full.
Best practices
While similar to a Block, Accordions are not intended to be used within within a Panel.
Accordion is best suited to containing narrative or text-heavy content in the main interactive area of an application, whereas Block is recommended for displaying interactive controls and elements within a Panel.
Try to avoid placing interactive controls or elements that affect an application state or display within Accordion. These should instead be placed within one or more Block(s). However, in certain instances, it may be appropriate to place interactive controls or form-based elements inside an Accordion - for example, when located within the main content area of a Settings page.
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus to next non-disabled calcite-accordion-item. If the currently focused step is the last step, the focus will leave the component. |
Tab and Shift | Moves focus to previous non-disabled calcite-accordion-item. If the currently focused step is the first step, the focus will leave the component. |
Enter | Toggles the expansion of the selected calcite-accordion-item. |
Space | Toggles the expansion of the selected calcite-accordion-item. |
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| appearance | appearance | Specifies the appearance of the component. | Extract<"solid" | "transparent", Appearance> | "solid" |
| iconPosition | icon-position | Specifies the position of the expand and collapse icons within | Extract<"start" | "end", Position> | "end" |
| iconType | icon-type | Specifies the type of the icon in the header. | Extract<"chevron" | "caret" | "plus-minus", IconType> | "chevron" |
| scale | scale | Specifies the size of the component. | Scale | "m" |
| selectionMode | selection-mode | Specifies the selection mode of the component, where:
| Extract<"single" | "single-persist" | "multiple", SelectionMode> | "multiple" |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding |
Styles
| Name | Description |
|---|---|
| --calcite-accordion-border-color | Specifies the component's border color. |
| --calcite-accordion-background-color | Specifies the component's background color. |
| --calcite-accordion-text-color | Specifies the component's text color. |
| --calcite-accordion-text-color-hover | Specifies the component's main text color on hover. |
| --calcite-accordion-text-color-press | Specifies the component's main text color when pressed. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Creates a promise that resolves once the component is fully loaded. | componentOnReady(): Promise<this> |