PrimitiveAvailable
Accordion
Expandable sections with keyboard navigation and independent content panels.
Installation
Add the component and its dependencies from the registry running on your computer.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/accordion.jsonUsage
Import the component into your project and keep the source code under your control.
tsx
'use client';
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from '@/components/ui/accordion';
export default function Demo() {
return (
<Accordion className="w-full max-w-lg" defaultValue={['install']}>
<AccordionItem value="install">
<AccordionTrigger>How do I install a component?</AccordionTrigger>
<AccordionContent>
Start the local registry, then copy the installation command from the
component documentation.
</AccordionContent>
</AccordionItem>
<AccordionItem value="ownership">
<AccordionTrigger>Can I customize the source?</AccordionTrigger>
<AccordionContent>
Yes. Components are copied into your project so you can change them.
</AccordionContent>
</AccordionItem>
<AccordionItem value="disabled" disabled>
<AccordionTrigger>Team settings (unavailable)</AccordionTrigger>
<AccordionContent>Team settings.</AccordionContent>
</AccordionItem>
</Accordion>
);
}
States & interaction
Appearance, behavior and keyboard checks.
- Check rest, hover, focus and selection/expansion. Current links and open content must be identified semantically.
- Hover is not selection. Keep the active state when the pointer leaves.
- Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.
API Reference
BrutalLab-specific properties. Native attributes are supported as well.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string[] | [] | Initially expanded item values. |
| multiple | boolean | true | Allows more than one expanded item. |
Accessibility
Rules that should remain intact when adapting the component to a product.
Triggers are buttons inside headings. Keep a meaningful heading level and unique item values.
Retain keyboard focus styles and test the composition with keyboard navigation.
Use className for visual customization; preserve the primitive ARIA attributes.