Collapsible

Collapsible vs Details. Use Details (native HTML) for simple disclosure patterns — FAQs, inline help, “show more” — where you don’t need animation or programmatic control. It’s zero-JS and browser-managed. Use Collapsible when you need: controlled state (open

• onOpenChange), animated open/close via data-state, or trigger and content that aren’t co-located in the markup (e.g. a sidebar toggle button controlling a panel elsewhere). Accordion already uses Collapsible internally.

Basic (uncontrolled)

Audit scope

import { Collapsible } from '@eekodigital/raster';

<Collapsible.Root>
  <Collapsible.Trigger>Audit scope</Collapsible.Trigger>
  <Collapsible.Content>
    This audit covers financial controls…
  </Collapsible.Content>
</Collapsible.Root>

Open by default

Findings summary

3 critical findings, 7 serious, 12 moderate. All critical findings require remediation within 30 days.

<Collapsible.Root defaultOpen>
  <Collapsible.Trigger>Findings summary</Collapsible.Trigger>
  <Collapsible.Content>…</Collapsible.Content>
</Collapsible.Root>

Controlled

Pass open and onOpenChange to drive state from your component.

const [open, setOpen] = useState(false);

<Collapsible.Root open={open} onOpenChange={setOpen}>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content>…</Collapsible.Content>
</Collapsible.Root>;

Props

Collapsible.Root

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
defaultOpen	boolean	false	Uncontrolled initial state.
onOpenChange	(open: boolean) => void	—	Called when state changes.
disabled	boolean	false	Prevents toggling.
className	string	—	Additional CSS classes.