Components
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Installation
npx asteria-ui add accordionUsage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
<Accordion type="single" collapsible defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Accordion Item</AccordionTrigger>
<AccordionContent>Content goes here.</AccordionContent>
</AccordionItem>
</Accordion>Examples
Multiple sections open
Multiple sections can be open at the same time.
Each is an independent Accordion here for the demo layout.
Disabled
API reference
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | — | Whether one section or several can be open at a time. |
| collapsible | boolean | false | When type="single", allows closing the open section by clicking it again. |
| defaultValue | string | string[] | — | Uncontrolled initial open item(s) — string for single, string[] for multiple. |
| value | string | string[] | — | Controlled open item(s) — pair with onValueChange. |
| onValueChange | (value: string | string[]) => void | — | Called when the open item(s) change. |
AccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Unique identifier for this item. |
| disabled | boolean | false | Prevents the item from being opened or closed. |
AccordionTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The header label. |
AccordionContent
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The revealed content. |
Accessibility
Accessibility
Headers. Each header is a real
<button>(via Radix) witharia-expandedreflecting open state.Content panels.
role="region"witharia-labelledbypointing back at its header.Keyboard. Enter/Space toggles the focused section. Arrow keys move between headers. Home/End jump to the first/last header.
Disabled items. Rendered as a native disabled button (plus
data-disabled), not justaria-disabled— removes it from the tab order the way assistive tech expects.Focus ring. Visible on Tab via
shadow-glow-focus.
When to use
Use for progressive disclosure — FAQ sections, settings panels, long forms. Reduces clutter while keeping content accessible.
Do:
- Keep headers concise
- Allow multiple sections open when content is related
- Use chevron icons to indicate expand/collapse
Don't:
- Nest accordions
- Hide critical info behind them
- Use for primary navigation