Collapsible

A component that allows content to be expanded or collapsed with smooth animations.

Usage


import { Collapsible } from "@rhinolabs/ui"
 
export default function CollapsibleDemo() {
  return (
    <Collapsible>
      <Collapsible.Trigger>Toggle content</Collapsible.Trigger>
      <Collapsible.Content>
        <p>This content can be expanded or collapsed.</p>
      </Collapsible.Content>
    </Collapsible>
  )
}

Examples

Basic Collapsible

A simple expandable section.


<Collapsible>
  <Collapsible.Trigger className="flex items-center">
    <span>Click to expand</span>
    <svg className="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
    </svg>
  </Collapsible.Trigger>
  <Collapsible.Content className="p-4">
    <p>This is the expandable content area.</p>
  </Collapsible.Content>
</Collapsible>

Controlled State

Managing the open state programmatically.


import { useState } from "react"
 
function ControlledCollapsible() {
  const [isOpen, setIsOpen] = useState(false)
 
  return (
    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
      <Collapsible.Trigger>
        {isOpen ? "Close" : "Open"} Settings
      </Collapsible.Trigger>
      <Collapsible.Content>
        <div className="p-4">
          <h4>Settings Panel</h4>
          <p>Configure your preferences here.</p>
        </div>
      </Collapsible.Content>
    </Collapsible>
  )
}

With Custom Animation

Adding custom transition effects.


<Collapsible>
  <Collapsible.Trigger>Expand</Collapsible.Trigger>
  <Collapsible.Content className="transition-all duration-300 ease-in-out">
    <div className="p-4 space-y-2">
      <h3>Section Title</h3>
      <p>Content with smooth animation.</p>
    </div>
  </Collapsible.Content>
</Collapsible>

Props

Collapsible

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	The initial open state
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`disabled`	`boolean`	`false`	Whether the collapsible is disabled

CollapsibleTrigger

Accepts all button HTML attributes.

CollapsibleContent

Accepts all div HTML attributes.

Design Considerations

Use clear trigger labels
Provide visual indicators for state
Consider animation timing
Maintain content hierarchy
Use consistent styling

Accessibility

Supports keyboard navigation
Uses ARIA expanded state
Maintains focus management
Provides clear state indicators
Handles screen reader announcements