Collapsible

A component that expands or collapses to show or hide content.

Usage

<script>
  import {Collapsible} from 'ui-ingredients';
</script>

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

API Reference

Root

Prop	Default	Description
`defaultOpen`		`boolean` The initial open state of the collapsible when rendered. Use when you don't need to control the open state of the collapsible.
`disabled`		`boolean` Whether the collapsible is disabled.
`id`		`string` The unique identifier of the machine.
`ids`		`{ root?: string; content?: string; trigger?: string; }` The ids of the elements in the collapsible. Useful for composition.
`onExitComplete`		`VoidFunction` The callback invoked when the exit animation completes.
`onOpenChange`		`(details: OpenChangeDetails) => void` The callback invoked when the open state changes.
`open`		`boolean` The controlled open state of the collapsible.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	root
`data-scope`	collapsible
`data-state`	"open" \| "closed"

Content

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-collapsible`
`data-disabled`	Present when disabled
`data-part`	content
`data-scope`	collapsible
`data-state`	"open" \| "closed"

Trigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-part`	trigger
`data-scope`	collapsible
`data-state`	"open" \| "closed"

Accessibility

Keyboard Support

Key	Description
Space	Opens/closes the collapsible.
Enter	Opens/closes the collapsible.