Accordion
Accordion runtime: Root supports single/multiple, Item provides a unique value, Trigger/Content form each entry.
Runtime
State contracts come from @varo-ui/headless; rendered parts come from @varo-ui/h5/primitives or @varo-ui/weapp/primitives.
Demo
Body one
Basic usage
Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry.
Multiple mode
With type="multiple", value is an array; item values must stay unique.
Parts
| Part | Purpose |
|---|---|
AccordionRoot | Collection state |
AccordionItem | One entry |
AccordionTrigger | Entry title |
AccordionContent | Entry body |
Props
AccordionRoot
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'single' | 'multiple' | implementation default | Single or multiple open |
value | string | string[] | undefined | undefined | Controlled value |
defaultValue | string | string[] | undefined | Uncontrolled initial value |
collapsible | boolean | false | Allow all collapsed in single mode |
disabled | boolean | false | Disable whole root |
id | string | undefined | Association id |
AccordionItem
| Prop | Type | Description |
|---|---|---|
value | string | Unique item value |
disabled | boolean | Item disabled |
Events
| Event | Payload | Description |
|---|---|---|
update:value | string | string[] | Controlled sync |
valueChange | string | string[] | Value change |
Accessibility
- Item value associates Trigger/Content.
- Disabled items cannot expand.
Platform notes
- Both runtimes share single/multiple contracts.
- Motion and icons belong to UI wrappers. :::