Disclosure
Accordion
Radix-backed vertically stacked set of collapsible sections.
A Radix-backed, vertically stacked set of collapsible sections. Set type="single" for one-at-a-time panels (add collapsible so the open one can close) or type="multiple" to allow several open at once. Full keyboard a11y (arrow keys, Home/End, Enter/Space) comes from Radix.
Import
import {
Accordion, AccordionItem, AccordionTrigger, AccordionContent,
} from "@yuhuanowo/yunui";
Single (collapsible)
One open at a time
Multiple
Several open at once
Server-sent token streaming is supported across providers.
Props
Accordion, AccordionItem, AccordionTrigger and AccordionContent are thin wrappers over Radix's Accordion primitives, so they accept all of their props. The most common ones:
| Prop | Type | Default | Description |
|---|---|---|---|
| type* | "single" | "multiple" | — | Whether one or several panels can be open at once. |
| collapsible | boolean | false | (type=single) Allow the open panel to be closed. |
| value / defaultValue | string | string[] | — | Controlled / uncontrolled open item(s). |
| onValueChange | (value) => void | — | Fires when the open item(s) change. |
| AccordionItem.value* | string | — | Unique identifier for the section. |
| disabled | boolean | — | Disable an item or the whole group. |