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
`animateOnMount`	`true`	`boolean` Whether to run the enter animation when the component mounts.
`collapsedHeight`		`string \| number` The height of the content when collapsed.
`collapsedWidth`		`string \| number` The width of the content when collapsed.
`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.
`keepMounted`	`true`	`boolean` Whether to keep the component mounted after exit.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting.
`onExitComplete`		`() => void` Callback that fires when the exit animation of the dialog 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-has-collapsed-size`	Present when the content has collapsed width or height
`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.