Collapsible

An interactive component that expands/collapses to show/hide content.

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.

PropTypeDefault
defaultOpenboolean
openboolean
disabledboolean
onOpenChangefunction
classNamestring
childrenReactNode
asChildboolean

Collapsible.Content Props

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

PropTypeDefault
forceMounttrue
classNamestring
childrenReactNode
asChildboolean
animatedboolean

Collapsible.Indicator Props

PropTypeDefault
sizestring | number
absoluteStrokeWidthboolean
classNamestring
typeenum
childrenReactNode

Collapsible.Trigger Props

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

PropTypeDefault
typeenum
classNamestring
childrenReactNode
asChildboolean