All components (204)
Accordion
Navigation · Accordion · .amset-accordion
What it is and when to use it
Collapsible sections one below the other, each with its title and, if needed, a summary of what is inside. By default only one is open at a time.
When to use it
- For secondary information that not everyone will read: materials, care, shipping, frequently asked questions.
allowsMultipleExpandedwhen it makes sense to have several open and compare them.summaryon each section so people know what is inside without opening it ("Tax ID, address and province").headingLevelaccording to where it goes: under anh2, the accordion titles areh3.
When not to
- For what has to be read no matter what (the price, a legal notice): in plain view, not collapsed.
- For views of the same object that are looked at one at a time:
Tabs. - For a tree of more than one level:
Tree.
Keyboard: Tab moves through the section titles; Enter or Space opens and closes the one with focus. A disabled section does not take focus. If a section closes with focus inside it (a "Save and continue" that collapses it with expandedKeys), focus returns to its title instead of falling to the page.
Accessibility: each title is a real heading (h3 by default) with a button inside that says whether it is open with aria-expanded. Anyone navigating by headings jumps from section to section. What is collapsed is neither seen nor read, but the browser's find-in-page does find it and opens the section. The arrow is decorative.
Fine-tuning: CSS variables --amset-accordion-*: -background, -font, -gap, -padding-block, -padding-inline, -radius. The size moves the padding, the gap, the font size and the radius.
What it looks like
<Accordion
sections={[
{ key: 'envio', title: 'Shipping and delivery times', content: <Envio /> },
{ key: 'devol', title: 'Returns', summary: '30 days', content: <Devoluciones /> },
]}
/>Props
Import it with import { Accordion } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
sectionsrequired | readonly AccordionSection[] | — |
allowsMultipleExpanded | boolean | Several sections open at once. By default, only one. |
className | string | — |
defaultExpandedKeys | Iterable<Key> | The sections open at the start. |
disabled | boolean | Disables the whole accordion, without touching the list of sections. |
expandedKeys | Iterable<Key> | The open sections, controlled from outside. |
headingLevel | 3 | 4 | 2 | Heading level so the page hierarchy does not break. |
onExpandedChange | (keys: Set<Key>) => void | — |
size | "sm" | "md" | "lg" | The padding and font size of each section. |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
CSS variables
These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.
| Variable | Default |
|---|---|
--amset-accordion-padding-block | var(--amset-space-3) |
--amset-accordion-padding-inline | var(--amset-space-4) |
--amset-accordion-gap | var(--amset-space-3) |
--amset-accordion-font | var(--amset-text-base) |
--amset-accordion-radius | var(--amset-radius-lg) |
--amset-accordion-background | var(--amset-surface) |
How to change it
.amset-accordion {
--amset-accordion-padding-block: ...;
--amset-accordion-padding-inline: ...;
}In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: