Github

Accordion

Accordions let users expand and collapse sections to reveal content progressively.

Component variations

Style Variations

Contains: Filled, Divided. Filled is default

This is content for the filled accordion style
This is content for the divided accordion style

State Variations

Accordion can be expanded or collapsed

This content is hidden by default
This content is visible by default

With Icons

Accordion items can display an icon

This accordion has an icon in the header

Usage Guidelines

Import

Import the accordion component in your module or component:

import-accordion.ts

Copy code

Basic Implementation

Here is a basic example of using the accordion component:

accordion-example.html

Copy code

Implementation with all available APIs

Here is an example of using the accordion component with all available APIs:

accordion-example.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
title
string
-
Yes
Title text displayed in the accordion header
variant
'filled' | 'divided'
'filled'
No
Visual style of the accordion
active
boolean
false
No
Controls whether the accordion is expanded
icon
string
-
No
Optional icon to display in the header

Best Practices

When to Use

  • Use Accordion when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Accordion when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Keep section titles concise and descriptive
  • Use icons to improve visual hierarchy
  • Ensure only one section is expanded at a time for cleaner UX
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component Playground

Experiment with different accordion configurations

Optional

This is the accordion content that appears when expanded.

example.html

Copy code