API reference
Headless accordion owns section registration, expansion state normalization, and trigger focus movement. You still own the surrounding markup, copy, and styling contract.
tngAccordion
| Input | Type | Default | Notes |
|---|
type | 'single' | 'multiple' | 'single' | Controls whether one or many items can stay expanded. |
value | string | number | readonly (string | number)[] | null | undefined | Controlled expansion state. undefined keeps the primitive uncontrolled. |
defaultValue | string | number | readonly (string | number)[] | null | undefined | Initial uncontrolled value or values. |
collapsible | boolean | true | In single mode, allows the currently open item to collapse. |
disabled | boolean | false | Disables interaction for every registered item. |
loop | boolean | true | Lets Arrow Up and Arrow Down wrap focus between first and last enabled triggers. |
lazy | boolean | false | Panels do not mount until the first time they open. |
keepAlive | boolean | true | Previously mounted panels remain in the DOM when closed. |
| Host hooks | data-slot="accordion", data-type, data-disabled |
The root also exposes valueChange, valuesChange, expandedChange, openStart, opened, closeStart, and closed, plus imperative open, close, toggle, and getExpandedValues() methods.
tngAccordionItem
| Input | Type | Default | Behavior |
|---|
value | string | number | Auto-generated | Stable identifier used in the root value set and change events. |
disabled | boolean | false | Opts just this item out of pointer and keyboard interaction. |
| Host hooks | data-slot="accordion-item", data-state, data-disabled |
tngAccordionTrigger
| Reflected attr | Source | Purpose |
|---|
role="button" | Always | Preserves button semantics even on non-button hosts. |
tabindex | Always | Roving focus across enabled triggers. |
aria-expanded | Item state | Reflects whether the owning item is open. |
aria-controls | Owned panel id | Links the trigger to its panel. |
aria-disabled / disabled | Root or item disabled state | Blocks interaction and exposes disabled semantics. |
data-state / data-disabled | Derived | Primary styling hooks for open and disabled presentation. |
| Keyboard behavior | Enter and Space toggle. Arrow Up, Arrow Down, Home, and End move focus. |
tngAccordionPanel
| Reflected attr | Source | Purpose |
|---|
role="region" | Always | Exposes each visible section as a labeled landmark region. |
aria-labelledby | Owned trigger id | Connects the panel back to its trigger text. |
hidden | Expansion state + mount policy | Hides closed panels and unmounted lazy panels. |
data-state | Expansion state | Differentiate open versus closed visuals or transitions. |
data-mounted | Lazy/keepAlive policy | Lets owners distinguish “closed but mounted” from “not mounted yet”. |
| Host slot | data-slot="accordion-panel" |
Owner responsibilities
- Provide real section structure and meaningful trigger text for each item.
- Choose controlled versus uncontrolled expansion behavior for the surrounding feature.
- Style motion, iconography, spacing, and panel content from your own CSS or utility layer.
- Prefer native
button triggers unless you explicitly need a custom focus sequence.