Collapsible

Show and hide one region of content, without a parallel styling pattern.

3 repositories starred

@zuno/ui

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add collapsible

Dependencies

What add collapsible installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

@zuno/utils

npm

@base-ui/[email protected]

Examples

2 examples · 1 component

3 repositories starred

@zuno/ui

Show more

A Button as the trigger; the text follows the state.

Order: #4821
Carrier: DHL Express
Arrives: Oct 2

Order details

Starts open with defaultOpen; closed, the panel stays searchable.

API reference

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`open / defaultOpen` Controlled or uncontrolled state.	`boolean`	`false`
`onOpenChange` Called when it opens or closes.	`(open: boolean) => void`	—
`disabled` Blocks the trigger.	`boolean`	`false`
`CollapsibleTrigger` Unstyled; use render to reuse Button.	`button`	—
`CollapsibleContent` Height-animated panel. hiddenUntilFound (default true) keeps it in the DOM and searchable; false unmounts it.	`div`	—

States

The states that apply to this component and their visual treatment.

State	Treatment
Closed	Content unmounted (or hidden until found).
Open	Content expands with a height transition.
Disabled	The trigger does not toggle.

Accessibility

The trigger has aria-expanded and aria-controls pointing to the content; Enter and Space toggle it.

Keep the trigger text describing the content ("Show details" / "Hide details") or pair it with an aria-label; the state is also announced through aria-expanded.

Use Accordion for several related sections; Collapsible is for a single region.

The height animation stops with reduced motion.