When To Use
- Use Collapsible 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 Collapsible 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
CollapsibleRoot, CollapsibleTrigger, CollapsibleContent
Example Code
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@hilum/ui"
<Collapsible>
<CollapsibleTrigger className="flex w-full items-center justify-between py-2 text-sm font-medium">
Voices
<ChevronDown size={14} />
</CollapsibleTrigger>
<CollapsibleContent>
<div className="flex flex-col gap-1 pb-2 pt-1">
<a className="rounded-md px-2 py-1.5 text-sm text-ground-600 hover:bg-ground-50">My voices</a>
<a className="rounded-md px-2 py-1.5 text-sm text-ground-600 hover:bg-ground-50">Voice library</a>
</div>
</CollapsibleContent>
</Collapsible>Collapsible
Default
Expandable content section — used for sidebar nav groups