Stacked disclosure sections that keep at most one open, or any number, with headers at the heading level you choose and arrow-key roaming between them.
SingleMultipleNot collapsibleDisabled item
Project name, description, and the branch new environments deploy from.
Invite teammates, assign roles, and review who has access to production.
Plan, seats, and invoices. Invoices are emailed on the first of each month.
Nothing archived yet.
<Accordion bind:value> <AccordionItem value="general" title="General"> Project name, description, and the branch new environments deploy from. </AccordionItem> <AccordionItem value="members" title="Members and roles"> Invite teammates, assign roles, and review who has access to production. </AccordionItem></Accordion>Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Accordion, AccordionItem } from '@chanrg/4ui';<Accordion bind:value> <AccordionItem value="general" title="General"> Project name, description, and the branch new environments deploy from. </AccordionItem> <AccordionItem value="members" title="Members and roles"> Invite teammates, assign roles, and review who has access to production. </AccordionItem></Accordion>Composition
Use the following composition to build a accordion:
Accordion
└── AccordionItem
├── heading → button (header)
└── region (panel)Multiple
Set type to multiple when sections are read side by side rather than chosen between; value becomes an array.
Project name, description, and the branch new environments deploy from.
Plan, seats, and invoices. Invoices are emailed on the first of each month.
<Accordion type="multiple" bind:value={openSections}> <AccordionItem value="general" title="General">…</AccordionItem> <AccordionItem value="billing" title="Billing">…</AccordionItem></Accordion>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | single | multiple | single | `single` keeps at most one section open; `multiple` allows any number. |
value | string | string[] ($bindable) | — | Open section value(s): a string in single mode, an array in multiple mode. |
collapsible | boolean | true | Single mode only: allow closing the open section from its own header. |
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | 3 | Heading level the item headers render at — match the surrounding outline. |
onchange | (value) => void | — | Fires with the new open value(s). |
item.value / title / disabled | string / string / boolean | — / — / false | Identifier within the parent value, header text, and gating. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Each header is a real button inside a heading, so heading navigation jumps between sections.
- Headers expose aria-expanded and aria-controls; every panel is a region labelled by its header.
- ArrowUp, ArrowDown, Home and End roam the headers in visual order and skip disabled ones.
- A collapsed panel stays mounted but inert, so it leaves the tab order and the accessibility tree while the height animates.