Accordion

Playground

<Accordion type="single" collapsible> <AccordionItem value="one"> <AccordionTrigger>First question</AccordionTrigger> <AccordionContent>First answer.</AccordionContent> </AccordionItem> <AccordionItem value="two">…</AccordionItem></Accordion>

Usage

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

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes — it follows the WAI-ARIA pattern.</AccordionContent>
  </AccordionItem>
</Accordion>

type="single" keeps one section open at a time — add collapsible to allow closing it. type="multiple" lets sections open independently.

Props

The accordion parts have no props of their own — they accept every prop of their Radix counterparts: Accordion.Root (type, collapsible, value, defaultValue, onValueChange, ...), Accordion.Item (value, disabled, ...), and Accordion.Trigger / Accordion.Content.

Changelog

• 20 August 2026 — Chrome in a CSS module; look unchanged. Full notes
• 22 July 2026 — Trigger hover quietens to Neutral 700 (no underline). Full notes
• 14 July 2026 — Component page added (was in the library undocumented). Full notes