Accordion

Examples

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

AccordionItem

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 multiple for settings or filter panels where independent toggling makes sense.
• Give each AccordionItem a stable value so 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, since arrow-key focus rings get confusing past one level.
• Don't put padding directly on AccordionContent. The inner wrapper already handles it, and overriding can cause animation clip.