Accordions
Accordions organize content into collapsible sections with interactive headers that users can click to expand or collapse the content beneath.
Overview
Use the revealedInitially
prop to control whether accordions are open or closed on page load. Accordions can display plain text or slotted content, including HTML or other Vue components like long-form text.
When stacking multiple related sections, such as frequently asked questions, use the FAQ variant.
Dos and Don’ts

- Do use clear labels that accurately describe the hidden content or intended audience.
- Do use the FAQ style variant to display multiple related sections of content.

- Don’t use accordions for important information that may be missed. Instead, display critical details prominently on the page using color, size, font weight, and placement. Alternatively, use the notification component to alert users to system status or validation messages.

- Don’t use accordions on very short pages or when headings alone can effectively break up content. While accordions can simplify complex pages, they can also add cognitive load by requiring users to decide what content to show and hide.
Installation
Props
No records available |
Slots
No records available |