Disclosure / Accordion

Accordion

<Accordion />Stable

Vertically stacked disclosure sections on Radix Accordion — single or multiple open, animated height via the vendored accordion keyframes, chevron from the Icon registry, hairline dividers, and the system hover (soft accent fill only). Triggers accept arbitrary content but stay one native button; row actions belong beside the trigger, never inside it — the Filters family shows that overlay pattern.

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

Variants

Single mode keeps one section open (collapsible lets it close); multiple mode opens sections independently. Height animates with the accordion-down/up keyframes against Radix's measured content height and drops entirely under reduced motion. Focus is a visible inset ring; disabled items fade to half opacity.

Athletes keep four seasons of competition inside a five-year window. Redshirt years pause the clock; graduate transfers reset the paperwork, not the window.

<Accordion type="single" collapsible defaultValue="eligibility">
  <AccordionItem value="eligibility">
    <AccordionTrigger>Eligibility rules</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
  {/* one item open at a time; collapsible allows closing it */}
</Accordion>

Source

Radix Accordion under the hood: full keyboard (arrows, Home/End), aria-expanded wiring, and measured-height animation for free. Every visual resolves through semantic tokens — row text text-main, body text-body, dividers border-border, hover accent/50, focus ring-ring/50.