Accordion
Directive-based disclosure UI — items use headless directives so you control the markup.
Keyboard: Tab between triggers, Enter / Space to toggle. Sets aria-expanded on triggers and role="region" on panels.
$ npm install @bloc-ui/accordion
Common Patterns
Single Open Item
Default behaviour keeps focus on one section at a time.
Summary content goes here.
More detail goes here when the user wants to drill in.
Multi Expand
Enable multiple expanded sections when users need quick comparison.
Keep spacing and typography in sync across the system.
Preserve semantic structure and keyboard affordances.
Capture validation steps before shipping a new component package.
States
Disabled
Visually muted and non-interactive. Clicks are suppressed.
This section works normally.
This content cannot be reached.
Rich Content
Project any content — lists, links, or other components.
- Install the package
- Import the directives
- Add
<bloc-accordion>to your template
Custom Icon
Custom Chevron
Add blocAccordionChevron to your own icon to replace the default chevron. The .is-open rotation is applied automatically.
Run
npm install @bloc-ui/accordion to get started. Import the directives in your standalone component or module.
No Chevron
Set [chevron]="false" to hide the icon entirely.
Summary content goes here.
More detail goes here.
Theming
Custom Tokens
Override colours via CSS custom properties — works without Tailwind.
All token values are driven by CSS custom properties.
Override any combination of tokens for your theme.
Available Tokens
All CSS custom properties exposed by the accordion.
- --bloc-accordion-border
- --bloc-accordion-radius
- --bloc-accordion-bg
- --bloc-accordion-header-bg
- --bloc-accordion-header-hover-bg
- --bloc-accordion-focus-ring
- --bloc-accordion-title-color
- --bloc-accordion-color