Ivaldi | ui | Collapsible

Anatomy

<Collapsible.Root>
  <Collapsible.Trigger />
  <Collapsible.Content />
</Collapsible.Root>

Usage

import { Collapsible } from '@ivaldi/ui'

<Collapsible.Root>
  <Collapsible.Trigger className="flex items-center gap-2">
    <ChevronDownIcon className="size-4" />
    Click to expand
  </Collapsible.Trigger>
  <Collapsible.Content>
    <div className="p-4">
      This content can be shown or hidden.
    </div>
  </Collapsible.Content>
</Collapsible.Root>

Controlled State

You can control the collapsible state programmatically:

const [isOpen, setIsOpen] = useState(false)

return (
  <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>
    <Collapsible.Trigger className="flex items-center gap-2">
      <ChevronDownIcon 
        className={cn(
          "size-4 transition-transform",
          isOpen && "rotate-180"
        )} 
      />
      {isOpen ? 'Click to collapse' : 'Click to expand'}
    </Collapsible.Trigger>
    <Collapsible.Content>
      <div className="p-4">
        This content is controlled by state.
      </div>
    </Collapsible.Content>
  </Collapsible.Root>
)

With Animation

Add smooth animations to the collapsible content:

<Collapsible.Root>
  <Collapsible.Trigger className="flex items-center gap-2">
    <ChevronDownIcon className="size-4" />
    Animated collapsible
  </Collapsible.Trigger>
  <Collapsible.Content className="data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
    <div className="p-4">
      This content animates when opening/closing.
    </div>
  </Collapsible.Content>
</Collapsible.Root>

Nested Collapsibles

You can nest collapsible components:

<Collapsible.Root>
  <Collapsible.Trigger className="flex items-center gap-2">
    <ChevronDownIcon className="size-4" />
    Parent Collapsible
  </Collapsible.Trigger>
  <Collapsible.Content>
    <div className="p-4">
      <Collapsible.Root>
        <Collapsible.Trigger className="flex items-center gap-2">
          <ChevronDownIcon className="size-4" />
          Child Collapsible
        </Collapsible.Trigger>
        <Collapsible.Content>
          <div className="p-4">
            Nested collapsible content
          </div>
        </Collapsible.Content>
      </Collapsible.Root>
    </div>
  </Collapsible.Content>
</Collapsible.Root>

Collapsible.Root Props

A collapsible component that can be expanded or collapsed. Provides the root container for the collapsible functionality.

Prop	Type	Default
`defaultOpen`	`boolean`	—
`open`	`boolean`	—
`disabled`	`boolean`	—
`onOpenChange`	`function`	—
`className`	`string`	—
`children`	`ReactNode`	—
`asChild`	`boolean`	—

Collapsible.Content Props

The content section that can be expanded or collapsed. Contains the elements that are shown/hidden based on the collapsible state.

Prop	Type	Default
`forceMount`	`true`	—
`className`	`string`	—
`children`	`ReactNode`	—
`asChild`	`boolean`	—
`animated`	`boolean`	—

Collapsible.Indicator Props

Prop	Type	Default
`size`	`string \| number`	—
`absoluteStrokeWidth`	`boolean`	—
`className`	`string`	—
`type`	`enum`	—
`children`	`ReactNode`	—

Collapsible.Trigger Props

The trigger element that controls the expand/collapse state. Users interact with this element to toggle the collapsible content.

Prop	Type	Default
`type`	`enum`	—
`className`	`string`	—
`children`	`ReactNode`	—
`asChild`	`boolean`	—