Collapsible

Lets users show or hide additional content.

Usage

Use Collapsible to reveal or hide supplementary content on demand.

import { Collapsible, Text, Icon } from "@elemnts-ui/react";

<Collapsible>
  <Collapsible.Trigger>
    <Text flex="1">Toggle Content</Text>
    <Collapsible.Indicator>
      <Icon icon="tabler:chevron-down" />
    </Collapsible.Indicator>
  </Collapsible.Trigger>
  <Collapsible.Content>
    <Text p="12">Hidden Content</Text>
  </Collapsible.Content>
</Collapsible>;

Default open

To render the collapsible open initially, set the defaultOpen prop.

Partial height

Set the collapsedHeight prop to keep a fixed-height preview of the content visible when collapsed.

Disabled

Set the disabled prop to prevent users from toggling the collapsible.

API Reference

Collapsible

Manages the state and appearance of a collapsible component.

Prop	Type	Default
open	`boolean`	`-`
defaultOpen	`boolean`	`false`
onOpenChange	`(details: CollapsibleChangeDetails) => void`	`-`
collapsedHeight	`number`	`-`

CollapsibleTrigger

Manages the trigger element of the collapsible component.

Prop	Type	Default
asChild	`boolean`	`false`
disabled	`boolean`	`false`

CollapsibleContent

Manages the content element of the collapsible component.

Prop	Type	Default
asChild	`boolean`	`false`

CollapsibleIndicator

Manages the indicator element of the collapsible component.

Prop	Type	Default
asChild	`boolean`	`false`