Accordion

Accordion Examples (Tailwind)

Headless primitives first, then component wrappers. Try ArrowUp/ArrowDown, Home/End, Enter, and Space.

Headless Primitive: Single

Uses root/item/trigger/panel directives with roving focus and ARIA linkage.

Headless Primitive: Multiple + Lazy

Supports single/multiple modes, controlled/uncontrolled values, and disabled items.
Emits value/value[] updates with trigger metadata and lifecycle events.

Component Wrapper: Single

What is TailNG?
TailNG is an accessibility-first Angular component system with copy-paste and package modes.

Component Wrapper: Multiple + Non-collapsible

Performance
Keyboard navigation and state sync stay in primitives while wrappers keep appearance concerns.