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.
Usage
- To organize related text-based information.
- To shorten pages and reduce scrolling when content is not crucial to read in full.
Sample
<calcite-accordion>
<calcite-accordion-item description="Yachts, boats, and dinghies" heading="Watercraft" icon-start="embark">
<calcite-notice open>
<div slot="message">Recommended for coastal use</div>
</calcite-notice>
</calcite-accordion-item>
<calcite-accordion-item icon-start="car" heading="Automobiles" description="Cars, trucks, and buses">
<calcite-notice open>
<div slot="message">A good choice for inland adventure</div>
</calcite-notice>
</calcite-accordion-item>
<calcite-accordion-item icon-start="plane" heading="Aircraft" description="Planes, helicopters, and jets">
<calcite-notice open>
<div slot="message">Cross continents quickly</div>
</calcite-notice>
</calcite-accordion-item>
</calcite-accordion>
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. | "solid" | "transparent" | "solid" |
iconPosition | icon-position | Specifies the placement of the icon in the header. | "end" | "start" | "end" |
iconType | icon-type | Specifies the type of the icon in the header. | "caret" | "chevron" | "plus-minus" | "chevron" |
scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
selectionMode | selection-mode | Specifies the selection mode of the component, where:
"multiple" allows any number of selections,
"single" allows only one selection, and
"single-persist" allows one selection and prevents de-selection. | "multiple" | "single" | "single-persist" | "multiple" |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding calcite-accordion-item s. calcite-accordion cannot be nested, however calcite-accordion-item s can. |
Styles
Name | Description |
---|---|
--calcite-accordion-border-color | Specifies the component's border color. |
--calcite-accordion-background-color | Specifies the component's background color. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |