Design System/Atoms/Accordion

Accordion

Vertically stacked sections that expand and collapse.

When To Use

  • Use Accordion when you need a reusable atoms pattern instead of rebuilding the structure from primitives.
  • Start from the simplest example that fits the task, then add decoration only when it clarifies meaning or hierarchy.
  • Review the examples below to understand the tradeoffs between density, emphasis, and behavior.

When Not To Use

  • Do not use Accordion just because it already exists in the catalog; choose the pattern that matches the task, not the most decorative option.
  • Do not keep layering options onto the pattern when a simpler component or section would be easier to understand and maintain.

Accessibility Notes

  • Keep headings, labels, and supporting text in the DOM before decorative chrome so the page reads well without styles or scripts.
  • Test the pattern with keyboard navigation and a screen reader before treating the visual layout as complete.
  • Use status, selection, and disabled states that remain understandable without color alone.

Key Props / API

Key exports

AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent

Example Code

import {
  Accordion, AccordionItem, AccordionTrigger, AccordionContent,
} from "@hilum/ui"

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>What is a voice clone?</AccordionTrigger>
    <AccordionContent>
      A voice clone is an AI model trained on your voice samples
      that can generate speech in your voice.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>How many samples do I need?</AccordionTrigger>
    <AccordionContent>
      For best results, provide at least 10 minutes of clean,
      studio-quality audio with no background noise.
    </AccordionContent>
// ...trimmed for docs

Accordion

FAQ style

Collapsible sections with animated open/close