Collapsible

A simple expandable section with a trigger and hidden content. Built on Radix UI.

Basic Example

Default Open

Use defaultOpen to start the collapsible in an expanded state.

This content is visible by default.

Disabled State

Installation

npx visor add collapsible

This copies two files into your project:

components/ui/collapsible/collapsible.tsx — the component
components/ui/collapsible/collapsible.module.css — the styles

Usage

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible/collapsible';

export default function Example() {
  return (
    <Collapsible>
      <CollapsibleTrigger>Toggle</CollapsibleTrigger>
      <CollapsibleContent>Hidden content here.</CollapsibleContent>
    </Collapsible>
  );
}

API Reference

CollapsibleProps

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	—	Callback when the open state changes.
`defaultOpen`	`boolean`	`false`	Default open state for uncontrolled usage.
`disabled`	`boolean`	`false`	Prevents opening or closing.

The component also accepts all standard <div> HTML attributes.

Sub-components

Component	Element	Purpose
`Collapsible`	`<div>`	Root container. Manages open/closed state.
`CollapsibleTrigger`	`<button>`	Toggle button. Use `asChild` to render a custom element.
`CollapsibleContent`	`<div>`	Animated content panel.

Accessibility

Built on Radix UI Collapsible primitive — fully keyboard accessible.
The trigger has aria-expanded that reflects open/closed state automatically.
The content panel is linked to its trigger via aria-controls.
When disabled, the trigger receives aria-disabled="true".
Use CollapsibleTrigger with asChild to render any element as the toggle while preserving ARIA attributes.

Collapsible

On this page