Accordion
A vertically stacked set of collapsible sections. Triggers share group focus (arrow keys move between them) and, by default, only one section is open at a time.
Examples
Single (default)
Multiple
Controlled
Overview
Accordion wraps Base UI Accordion. It comes with light default styling — a bordered container, divided rows, a chevron that rotates when its section is open. Pass multiple to allow more than one section open at a time.
Use Accordion when triggers are siblings the user would expect to navigate between with arrow keys (FAQ lists, settings groups, expandable nav). For a one-off toggle, use Collapsible.
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@rogo-technologies/ui/accordion";
<Accordion defaultValue={["a"]}>
<AccordionItem value="a">
<AccordionTrigger>Section A</AccordionTrigger>
<AccordionContent>…</AccordionContent>
</AccordionItem>
</Accordion>;Usage
Single
Only one section open at a time. Opening one closes the others.
<Accordion defaultValue={["intro"]}>
<AccordionItem value="intro">
<AccordionTrigger>Intro</AccordionTrigger>
<AccordionContent>…</AccordionContent>
</AccordionItem>
<AccordionItem value="details">
<AccordionTrigger>Details</AccordionTrigger>
<AccordionContent>…</AccordionContent>
</AccordionItem>
</Accordion>Multiple
Any number of sections can be open at the same time.
<Accordion multiple defaultValue={["a", "c"]}>
…
</Accordion>Controlled
const [value, setValue] = useState<string[]>(["a"]);
<Accordion value={value} onValueChange={(next) => setValue(next as string[])}>
…
</Accordion>;API
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
value | string[] | — | Controlled list of open item values. |
defaultValue | string[] | — | Uncontrolled initial open items. |
onValueChange | (value: string[]) => void | — | Fired when the open set changes. |
multiple | boolean | false | Allow multiple items open at once. |
orientation | "horizontal" | "vertical" | "vertical" | Arrow-key navigation direction between triggers. |
loopFocus | boolean | true | Loop arrow-key focus past the first / last trigger. |
disabled | boolean | false | Disables all items. |
className | string | — | Additional CSS classes on the root. |
AccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Identifier used in value / defaultValue. |
disabled | boolean | false | Disables just this item. |
AccordionTrigger
Renders a native <button>. Includes a default rotating chevron at the end. Replace it by passing your own icon as a child after the label.
AccordionContent
Renders a <div> with a height transition. Padding lives on an inner div so the animation doesn't clip — apply your own className for typography or color overrides.
Guidelines
Do
- Use Accordion when triggers are siblings users would expect to navigate between with arrow keys.
- Use
multiplefor settings or filter panels where independent toggling makes sense. - Give each
AccordionItema stablevalueso controlled state and analytics stay consistent.
Don't
- Don't use Accordion for a single, isolated toggle — use Collapsible so you don't imply group navigation that doesn't exist.
- Don't nest Accordions deeply — arrow-key focus rings get confusing past one level.
- Don't put padding directly on
AccordionContent— the inner wrapper already handles it; overriding can cause animation clip.