Collapsible

Layout

Interactive

An expandable/collapsible container component for hiding and revealing content. Perfect for FAQs, settings panels, and progressive disclosure.

Preview

Interactive collapsible example

Props

Collapsible component API reference

Prop	Type	Default	Description
`trigger*`	`ReactNode`	—	Content to display in the trigger button (visible when collapsed/expanded)
`children*`	`ReactNode`	—	Content to show/hide when expanded
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled mode)
`open`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes
`disabled`	`boolean`	`false`	Disable the collapsible interaction
`className`	`string`	—	Additional CSS classes for the container
`triggerClassName`	`string`	—	Additional CSS classes for the trigger button
`contentClassName`	`string`	—	Additional CSS classes for the content area
`aria-label`	`string`	—	Accessible label for the trigger (use when trigger content is not descriptive)

Settings Panel

Multiple collapsible sections with icons

Controlled State

Collapsible with external state control

Status:

Closed

Usage

Import and implementation example

import { Collapsible } from '@/components/ui/collapsible'

export default function Example() {
  return (
    <Collapsible
      trigger={<span>Click to expand</span>}
      defaultOpen={false}
    >
      <div className="p-4">
        Content goes here
      </div>
    </Collapsible>
  )
}

Features

Built-in functionality

Controlled & uncontrolled: Works with both internal and external state management
Custom triggers: Any React content can be used as the trigger
Chevron indicator: Rotates 180° when expanded
Disabled state: Prevent interaction when disabled
Custom styling: Separate className props for container, trigger, and content
Smooth transitions: CSS transitions for chevron rotation
Dark mode: Full dark mode support
Keyboard accessible: Works with Enter and Space keys

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

aria-expanded (on trigger button)aria-controls (links trigger to content)aria-disabled (when disabled)aria-label (optional, for non-descriptive triggers)role="region" (on content)aria-labelledby (links content to trigger)

Keyboard Navigation

Key	Action
`Enter`	Toggle the collapsible open/closed
`Space`	Toggle the collapsible open/closed
`Tab`	Move focus to the trigger button

Notes

The trigger is a native button element for full keyboard accessibility
Content region is linked to the trigger via aria-labelledby
Chevron icon is hidden from screen readers with aria-hidden
When disabled, the trigger has aria-disabled="true" and reduced opacity
Focus ring is visible when navigating with keyboard

Related Components

Accordion Disclosure Expandable Details