Accordion

InstallationCopy Anchor Link

UsageCopy Anchor Link

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export function ServiceFaq() {
  return (
    <Accordion defaultValue={["eligibility"]}>
      <AccordionItem value="eligibility">
        <AccordionTrigger>Who can apply?</AccordionTrigger>
        <AccordionContent>Citizens and residents with a valid ID.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="time">
        <AccordionTrigger>How long does processing take?</AccordionTrigger>
        <AccordionContent>Most requests are completed within 5 working days.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Use an Accordion for content people scan by heading and open only in part: questions and answers, the sections of a long form. Do not hide what everyone must read. By default one section is open at a time; set multiple to let people open several.

AnatomyCopy Anchor Link

• Item: one section, with a 1px line above it. The value identifies it.
• Trigger (a <button> in a heading): Text md, Semibold, with a chevron that turns when the section is open.
• Panel (role="region"): the content. It animates its height.

ExamplesCopy Anchor Link

Sizes, leading and flushCopy Anchor Link

size sets the header padding: sm 8px, md 12px, lg 16px. iconPosition="leading" puts the chevron first. flush keeps the lines 16px from the edges. multiple lets several sections stay open.

RTLCopy Anchor Link

The chevron sits on the end side (the left in Arabic), or the start side with iconPosition="leading". The panel text is indented with logical padding so it lines up with the heading text. No [dir=rtl] overrides are needed.

AccessibilityCopy Anchor Link

• Built on Base UI Accordion: each heading is a <button> with aria-expanded and aria-controls, inside a heading element; the panel is a region labelled by it. A closed panel is hidden from screen readers. As the WAI-ARIA pattern asks, Tab, Enter and Space are all that is needed.
• The open state is shown by the chevron turning and by the panel itself, not by colour. Focus is a 2px outline inside the heading.
• Text is 4.5:1 and the chevron 3:1 or better in every state, light and dark. A disabled section cannot be opened.
• The panel opens and closes by animating its height; with reduced motion it opens at once.

API ReferenceCopy Anchor Link

Deviations from DGACopy Anchor Link

• The DGA CSS repeats every body-padding rule for [dir=rtl] and html[lang=ar] (twelve rules). Logical padding (ps and pe) needs none.
• Flush is a 16px margin on each side of the line; DGA draws it with a border-image gradient at 16px and 382px, which only fits one width.
• A disabled section uses text-default-disabled instead of neutral-300 with !important.

ContrastCopy Anchor Link