Collapsible sections built on the native <details>/<summary> element. Accordion is the container; Accordion.Item is a single expandable row.
Use Accordion for FAQ-style content or any set of independently collapsible sections. Because it is built on native <details>, items stay expandable/collapsible without JavaScript.
There is no @uxf/form twin — Accordion is a content component, not a form field.
import { Accordion } from "@uxf/ui/accordion";
<Accordion>
<Accordion.Item id="item1" title="What is it?">
First item content
</Accordion.Item>
<Accordion.Item id="item2" title="Another question">
Second item content
</Accordion.Item>
</Accordion>;
Accordion renders only its Accordion.Item children (other children are ignored). Each item requires a unique id.
Accordion| Prop | Type | Default | Description |
|---|---|---|---|
children |
ReactNode |
— | Required. Accordion.Item elements. |
itemOpenBehavior |
"single" | "multiple" |
— | Grouping mode (see Variants & states). |
openIconName |
IconName |
— | Default open-state icon for all items (item-level prop wins). |
closeIconName |
IconName |
— | Default close-state icon for all items (item-level prop wins). |
className |
string |
— | Class on the container. |
Accordion.Item| Prop | Type | Default | Description |
|---|---|---|---|
id |
string |
— | Required. Unique id; also used as the React key. |
title |
ReactNode |
— | Required. Summary/header content. |
children |
ReactNode |
— | Required. Expanded content. |
isOpen |
boolean |
false |
Render the item expanded initially. |
openIconName |
IconName |
"chevronDown" |
Icon shown when collapsed. |
closeIconName |
IconName |
"chevronUp" |
Icon shown when expanded. |
iconSize |
number |
16 |
Icon size in px. |
name |
string |
— | Native <details name> group; items sharing a name open exclusively. Overridden when itemOpenBehavior="multiple". |
className |
string |
— | Class on the <details> element. |
itemOpenBehavior omitted): each item is an independent <details>, so several items can be open at once. Give two or more items the same name to group them into a native exclusive accordion (opening one closes the others).itemOpenBehavior="multiple": the container assigns all items one shared generated name, grouping them as a native exclusive accordion — only one item is open at a time. A JavaScript fallback closes sibling items on browsers that do not support the <details name> attribute.Import the component stylesheet, plus the Icon stylesheet (the chevrons render an Icon), once in your global CSS:
@import url("@uxf/ui/css/icon.css");
@import url("@uxf/ui/css/accordion.css");
The item title uses the shared @uxf/ui typography layer, which an app sets up once globally:
Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.