⌘K

accordion component

Drop-in semantic component. See examples, sizes, variants, and source.

Collapsible content sections. Compose an accordion wrapper around one or more item blocks, each containing a trigger and content. Variants like plus, arrow, minimal, and multiple control the indicator and selection mode. Behaviour (toggling, keyboard nav, accessibility attributes) comes from accordion.js.

Accordion System

Default Accordion (Caret Icons)

How do I update my account information?
Insert the accordion description here. It would look better as two lines of text.
What payment methods are accepted?
Major credit and debit cards like Visa, MasterCard, and American Express, as well as digital payment options like PayPal and Apple Pay.
How can I track my order?
Insert the accordion description here. It would look better as two lines of text.

Plus/Minus Icons

How do I update my account information?
Insert the accordion description here. It would look better as two lines of text.
What payment methods are accepted?
Major credit and debit cards like Visa, MasterCard, and American Express, as well as digital payment options like PayPal and Apple Pay.

Right Arrow Icons

How do I update my account information?
Insert the accordion description here. It would look better as two lines of text.
What payment methods are accepted?
Major credit and debit cards like Visa, MasterCard, and American Express, as well as digital payment options like PayPal and Apple Pay.

Minimal (No Icons)

How do I update my account information?
Insert the accordion description here. It would look better as two lines of text.
What payment methods are accepted?
Major credit and debit cards like Visa, MasterCard, and American Express, as well as digital payment options like PayPal and Apple Pay.

Multiple Open Mode

Can I open multiple items?
Yes! This accordion has the 'multiple' class, allowing multiple items to be open simultaneously.
What's the difference?
Without the 'multiple' class, opening one item automatically closes others. With 'multiple', all items can be open at once.
Try opening all three!
Click each item above and notice how they all stay open. Perfect for comparing information or viewing multiple sections at once.

Class API Reference

Type Class Usage Notes
Base accordion Required wrapper for one or more items Always required
item Single collapsible section Toggle via data-state="open|closed"
trigger Clickable header for an item Use role="button" tabindex="0"
content Body revealed when item is open Hidden via data-state="closed"
left-content Inner trigger group for icon + title Pairs with .icon and .title
Variants (default) Caret indicator — rotates 180° when open No modifier needed
plus Plus/minus indicator Modifier on accordion
arrow Right-arrow indicator — rotates 90° when open Modifier on accordion
minimal No expand/collapse indicator Modifier on accordion
Layout multiple Allow multiple items open at once Default behaviour is single-open
State data-state="open" Item is expanded Attribute on item
data-state="closed" Item is collapsed Default state