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

Accordion Do Example
Do
  • 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.
Accordion Dont Example
Don't
  • 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.
Accordion Dont Example
Don't
  • 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

Slots