Accordion
new 2.2 kB<hk-accordion>Animates on grid-template-rows rather than max-height, so panels of unknown content height still ease properly.
#collapse#faq
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| multiple | boolean | false | Allows more than one panel open. Switching back to single keeps only the first, so the mode is never contradicted by the state. |
| open | string[] | [] | Ids of open panels. Two-way bindable. |
| collapsible | boolean | true | Whether the last open panel can be closed. An accordion that cannot be fully closed traps the reader. |
| disabled | boolean | false | Per-panel, on hk-panel. A disabled header is skipped by the arrow keys rather than focused. |
Outputs
toggledEventEmitter<string>Emits the panel id that changed.
Methods
expandAll()() => voidOpens every enabled panel; implies multiple.
collapseAll()() => voidCloses every panel.
Keyboard
- Enter / Space Toggle the focused panel
- ↑ / ↓ Move between headers
Theming
This one adds no tokens of its own — it renders entirely from the global token layer.
Accessibility
- Headers are real buttons with aria-expanded and aria-controls, wrapped in a heading so the panel list is navigable by heading.
- Each panel is a region labelled by its own header.
- A closed panel is inert, so its content is out of the tab order rather than merely invisible.