Collapse

PreviousNext

Expandable accordion panels.

import { Collapse, CollapseItem, CollapseTrigger, CollapseContent } from "@/rl-ui";

<Collapse type="single" defaultValue="one">
<CollapseItem value="one">
  <CollapseTrigger>Section one</CollapseTrigger>
  <CollapseContent>Body one</CollapseContent>
</CollapseItem>
</Collapse>

Examples

Multiple + ghost

import { Collapse, CollapseItem, CollapseTrigger, CollapseContent } from "@/rl-ui";

<Collapse type="multiple" ghost defaultValue={["a"]}>
<CollapseItem value="a">
  <CollapseTrigger>Alpha</CollapseTrigger>
  <CollapseContent>Alpha body</CollapseContent>
</CollapseItem>
<CollapseItem value="b">
  <CollapseTrigger>Beta</CollapseTrigger>
  <CollapseContent>Beta body</CollapseContent>
</CollapseItem>
</Collapse>

API

PropTypeDefaultDescription
type"single" | "multiple""multiple"One vs many open panels.
borderedbooleantrueShow borders.
ghostbooleanfalseBorderless / ghost chrome.
defaultValuestring | string[]—Uncontrolled open panel(s).
valuestring | string[]—Controlled open panel(s).
disabledbooleanfalseDisable interaction.