Collapsible

An interactive component that expands and collapses content sections. Lower-level than Accordion — use when you need programmatic control or custom layouts.

Built on Radix UI.

✓Controlled and uncontrolled modes
✓CollapsibleTrigger can be any element via asChild
✓CollapsibleContent animates height via data-state
✓No default styles — compose freely

3 repositories pinned

@radix-ui/react-collapsible

import { Collapsible }from "@aetherstack/ui"

collapsible.tsx

import { useState } from "react"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@aetherstack/ui"

function Demo() {
  const [open, setOpen] = useState(false)
  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <CollapsibleTrigger>Toggle</CollapsibleTrigger>
      <CollapsibleContent>
        <p>Hidden content revealed on expand.</p>
      </CollapsibleContent>
    </Collapsible>
  )
}

Props

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
onOpenChange	(open: boolean) => void	—	Callback when open state changes.
defaultOpen	boolean	false	Initial open state for uncontrolled usage.
disabled	boolean	false	Prevents opening/closing.
asChild	boolean	—	On CollapsibleTrigger — merge props into the child element.

* Required props

Accessibility

→CollapsibleTrigger sets aria-expanded on the trigger element automatically.
→CollapsibleContent uses aria-hidden when closed so screen readers skip it.
→Keyboard: Space or Enter on the trigger toggles the content.