Components
Accordion
Accordion on Base UI: hairline items, +/- glyph, opacity-only panel, no hover effect.
Preview
Any registered officer of a participating body may submit.
Install
bash
npx shadcn add @eloquent/accordionUsage
tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
<Accordion defaultValue={["who"]}>
<AccordionItem value="who">
<AccordionTrigger>Who may submit a document?</AccordionTrigger>
<AccordionContent>Any registered officer of a participating body.</AccordionContent>
</AccordionItem>
</Accordion>value and defaultValue are arrays of item values. Add multiple to let several items stay open; by default opening one closes the other.
States
Single · closed, open, disabled
Visible, with a minus glyph.
Multiple
First panel.
Second panel.
| State | Treatment |
|---|---|
| Closed / open | aria-expanded, and a + or − glyph |
| Hover | None |
| Pressed | Ink fill with paper text |
| Focus | 2px ink outline, 2px offset |
| Disabled | Halftone text, cursor-not-allowed |
Keyboard
| Key | Action |
|---|---|
| Tab / Shift+Tab | Move between the triggers |
| Enter / Space | Open or close the focused item; focus stays on the trigger |
Base UI no longer moves focus between triggers with the arrow keys (it follows the updated APG guidance), so neither does this component.
Vietnamese
Mọi cán bộ đã đăng ký của đơn vị tham gia đều có thể nộp.
Ink adaptation
Upstream turns a chevron. Here the glyph swaps between + and −, so the open state is a shape and not a colour, and a hairline separates the items. Titles are Playfair 900 and bodies Source Serif. The panel fades with opacity only; there is no height animation, because brand motion is opacity and transform only. Built on Base UI Accordion.