Skip to content

Collapsible

One show/hide region, such as advanced options.

Sourcecomponents/collapsible.tsx

Usage

Collapsible usage
import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "@/components/collapsible";import { Field, FieldLabel } from "@/components/field";import { Input } from "@/components/input";
export function CollapsibleUsage() {  return (    <Collapsible>      <CollapsibleTrigger>Advanced options</CollapsibleTrigger>      <CollapsiblePanel>        <Field>          <FieldLabel>Webhook URL</FieldLabel>          <Input type="url" name="webhook" />        </Field>      </CollapsiblePanel>    </Collapsible>  );}

When to use

Use when

One show/hide region: "Advanced options"

Don’t use when

Navigation; several sections (use Accordion)