Components
Accordion and Collapsible
A section that opens and closes, with the ARIA, the arrow keys and the roving focus handled once. The panel does not pop — it settles, using the same layer rise as the Popover and the Card stack.
Examples
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
Collapsible,
CollapsibleContent,
CollapsibleTriggerRow,
} from "@luc/ui";One section at a time
Single mode is the settings pattern: opening one section closes the last, and collapsible lets the reader close everything.
<Accordion type="single" collapsible defaultValue="ingestion">
<AccordionItem value="ingestion">
<AccordionTrigger>Ingestion</AccordionTrigger>
<AccordionContent>…</AccordionContent>
</AccordionItem>
</Accordion>One surface, many sections
Card gives every section its own surface; flush keeps one and separates rows with a hairline, which is what long-form documentation and an FAQ want.
<Accordion type="multiple">
<AccordionItem value="a" variant="flush">
<AccordionTrigger>Is the panel animated?</AccordionTrigger>
<AccordionContent>Radix measures the panel; LUC animates to that height.</AccordionContent>
</AccordionItem>
<AccordionItem value="b" variant="flush">
<AccordionTrigger>Does collapsing unmount the content?</AccordionTrigger>
<AccordionContent>It does — state that must survive belongs above it, or behind forceMount.</AccordionContent>
</AccordionItem>
</Accordion>A disclosure without an item
Collapsible is the same behaviour for one region — no item wrapper, no roving focus, and an aside slot that can hold a control.
<Collapsible>
<CollapsibleTriggerRow aside={<Badge tone="info" size="sm">daily</Badge>}>
Advanced pipeline settings
</CollapsibleTriggerRow>
<CollapsibleContent>
<label className="flex items-center justify-between gap-4">
Retry failed partitions
<Switch defaultChecked />
</label>
<label className="flex items-center justify-between gap-4">
Publish on partial data
<Switch />
</label>
</CollapsibleContent>
</Collapsible>API
| Prop | Type | Default | Notes |
|---|---|---|---|
Accordion type | "single" | "multiple" | — | Radix's own contract: how many sections may be open. |
Accordion collapsible | boolean | — | In single mode, allow closing the open item. |
AccordionItem variant | "card" | "flush" | "card" | Own surface, or one surface with hairlines. |
AccordionTrigger icon / aside | ReactNode | — | Leading and right-aligned slots before the chevron. |
AccordionContent padded | boolean | true | Inner padding; off for a list or a table. |
Collapsible | Radix Root | — | One region, no item and no roving focus. |
Usage
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@luc/ui";<Accordion type="single" collapsible defaultValue="ingestion">
<AccordionItem value="ingestion">
<AccordionTrigger>Ingestion</AccordionTrigger>
<AccordionContent>…</AccordionContent>
</AccordionItem>
</Accordion>Guidelines
Do
- Use the accordion when several sections are worth reading but only one or two are usually open, and the reader needs to compare their headings.
- Use `Collapsible` when there is one region; it has no item wrapper and no roving focus, which is the smaller instrument for one disclosure.
Don't
- Hide content a reader always needs behind a disclosure — an accordion is a choice about attention, not a place to save space.
Accessibility
Each trigger is a real button inside a heading, with `aria-expanded` and `aria-controls` pointing at its panel. Arrow keys move between headers in the group, and collapsing unmounts the panel unless `forceMount` is set.
Related