Collapsible

Show or hide one supporting section with a linked native button.

Interactive preview

Live specimenTry the component

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add collapsible

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Collapsible defaultOpen={false}>
  <CollapsibleTrigger>Connection details</CollapsibleTrigger>
  <CollapsibleContent>Optional connection guidance</CollapsibleContent>
</Collapsible>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`open / defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`	`—`
`disabled`	`boolean`	`false`
`CollapsibleTrigger / CollapsibleContent`	`Native button / div attributes`	`generated relation IDs`

Accessibility

Enter and Space activate the native trigger. aria-expanded and aria-controls identify the state and panel. Hidden content is removed from the accessibility tree and Tab sequence while remaining mounted. Closing from within the panel restores focus to the trigger. A disabled root disables activation, not the visibility chosen by controlled state. Trigger/content IDs are internally owned; the root id can supply the ID prefix. Do not hide essential content without a discoverable trigger.