API reference
Headless collapsible is intentionally small. The primitive does not own state changes for you; it reflects the values you pass into the root, trigger, and content directives.
tngCollapsible
| Input | Type | Default | Host hooks |
|---|
open | boolean | false | data-state="open|closed" |
disabled | boolean | false | data-disabled when true |
| Host slot | data-slot="collapsible" |
button[tngCollapsibleTrigger]
| Input | Type | Default | Reflected behavior |
|---|
open | boolean | false | aria-expanded plus data-state. |
contentId | string | '' | Mirrors into aria-controls when provided. |
disabled | boolean | false | Applies native disabled and data-disabled. |
| Host slot | data-slot="collapsible-trigger" |
tngCollapsibleContent
| Input | Type | Default | Reflected behavior |
|---|
open | boolean | false | Removes hidden when open and mirrors data-state. |
| Host slot | data-slot="collapsible-content" |
Owner responsibilities
- Own the open state and wire the trigger click to your chosen toggle behavior.
- Provide a stable content id if you want
aria-controls on the trigger. - Author any extra state semantics inside the content, such as current, complete, or error steps.
- Bring your own animation if the content should expand or collapse with motion.