Mushilu-San UI Accordion
A stack of headings that each show or hide their own panel of content.
Selector: mui-accordion
import { AccordionGroup, AccordionItem } from '@mushilu-san/ui/data-display';Loading example…
Overview
mui-accordion-item has a heading button that toggles its panel, with aria-expanded and aria-controls linking the two.
multiple on the group to let several stay open.
When to use
FAQs and long settings pages where users look for one topic at a time. Grouping related sections that a user may want to skip.
When not to use
Content the user reads in full, in order. Show it on the page. Switching between views. Use tabs. Use Tabs instead.
Guidelines
Do
Write headings as questions or short topic names. Open the most common answer by default when there is one.
Don't
Do not hide critical warnings inside a collapsed item.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
trigger | button | aria-expanded follows the panel state, aria-controls names the panel. aria-disabled when disabled. |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab | |
| EnterSpace | |
| ArrowDownArrowUp |
The trigger is a native button, so Enter and Space work without extra code. Keep the heading text descriptive, since it is the only label.
API
AccordionGroup
| Name | Type | Default | Description |
|---|---|---|---|
multiple | boolean | false | Allow multiple panels open simultaneously. Defaults to single-open. Accepts attribute presence, e.g. <… multiple>. |
CSS parts
::part(root)
AccordionItem
| Name | Type | Default | Description |
|---|---|---|---|
heading | string | — | Visible heading text of the trigger button. |
disabled | boolean | false | Disables this item so it cannot be opened. Accepts attribute presence, e.g. <… disabled>. |
CSS parts
::part(body)::part(chevron)::part(heading)::part(item)::part(panel)::part(trigger)
Tokens
--mui-color-border--mui-color-text--mui-color-focus-ring--mui-touch-target--mui-space-3