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