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.