Collapsible
Single
One section opens at a time. collapsible defaults to true, allowing it to close.
All uplinks nominal. Latency 12ms.
Multiple
All uplinks nominal. Latency 12ms.
Battery 98%. Draw 41W.
Disabled item
Props
| PROP | TYPE | DEFAULT | REQUIRED |
|---|---|---|---|
motionTactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate. | enumauto | none | "auto" | no |
type | enumsingle | multiple | "single" | no |
defaultValueInitial open item: a string (type=single, empty for none) or a string[] (type=multiple). | string | array | — | no |
valueControlled open item: a string (type=single, empty for none) or a string[] (type=multiple). | string | array | — | no |
onValueChange | function | — | no |
collapsible | boolean | true | no |
| PROP | TYPE | DEFAULT | REQUIRED |
|---|---|---|---|
value | string | — | yes |
title | string | — | yes |
disabled | boolean | false | no |
Accessibility
- Tab and Shift+Tab move between section triggers; Enter or Space opens and closes a section. Disabled items cannot receive focus or expand.
- Heading-wrapped triggers expose
aria-expandedandaria-controls; each region is labeled by its trigger. - A rotated chevron identifies open sections; triggers have visible focus rings, drawn as a system-color outline in forced-colors mode.
- A long title wraps inside its trigger, which grows taller; long text and IDs in a panel wrap instead of being cut off.
Manifest entry
<Collapsible type="single">
<CollapsibleItem value="net" title="NETWORK">All links nominal.</CollapsibleItem>
<CollapsibleItem value="pwr" title="POWER">Battery 98%.</CollapsibleItem>
</Collapsible>View agent manifest
{
"description": "Accordion container whose CollapsibleItem children expand and collapse; single or multiple open at a time.",
"props": {
"motion": {
"type": "enum",
"values": [
"auto",
"none"
],
"default": "auto",
"description": "Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate."
},
"type": {
"type": "enum",
"values": [
"single",
"multiple"
],
"default": "single"
},
"defaultValue": {
"type": "union",
"types": [
"string",
"array"
],
"description": "Initial open item: a string (type=single, empty for none) or a string[] (type=multiple)."
},
"value": {
"type": "union",
"types": [
"string",
"array"
],
"description": "Controlled open item: a string (type=single, empty for none) or a string[] (type=multiple)."
},
"onValueChange": {
"type": "function"
},
"collapsible": {
"type": "boolean",
"default": true
}
},
"slots": {
"children": {
"type": "CollapsibleItem",
"required": true
}
},
"composable_with": [
"Card"
],
"example": "<Collapsible type=\"single\">\n <CollapsibleItem value=\"net\" title=\"NETWORK\">All links nominal.</CollapsibleItem>\n <CollapsibleItem value=\"pwr\" title=\"POWER\">Battery 98%.</CollapsibleItem>\n</Collapsible>"
}<CollapsibleItem value="net" title="NETWORK">All links nominal.</CollapsibleItem>View agent manifest
{
"description": "A single expandable section with an uppercase trigger title and collapsible content body.",
"props": {
"value": {
"type": "string",
"required": true
},
"title": {
"type": "string",
"required": true
},
"disabled": {
"type": "boolean",
"default": false
}
},
"slots": {
"children": {
"type": "any",
"required": true
}
},
"composable_with": [
"Collapsible"
],
"example": "<CollapsibleItem value=\"net\" title=\"NETWORK\">All links nominal.</CollapsibleItem>"
}Motion
Panels reveal in 220ms and collapse in 160ms, with matching chevron motion. Text stays at its natural scale and following content moves with the panel. Closing immediately removes the panel descendants from keyboard navigation.
Use motion="none" for frequently operated controls. The default motion="auto" respects system reduced motion, skips keyboard and assistive activation, and starts from the supplied resting state. See Motion for the interactive playground.