Collapsible

One disclosure with no frame, for the less common settings in a form. The trigger's caret box runs a keyline down the panel's edge, so what unfolds reads as part of it. meta says what's inside while it's closed.

Loading the live example…

"use client"

import { useState } from "react"
import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "@/components/keyline/ui/collapsible"
import { Field, FieldDescription, FieldFrame, FieldInput, FieldLabel } from "@/components/keyline/ui/field"
import { SwitchField } from "@/components/keyline/ui/switch"

export function DeliveryOptions() {
  const [liftgate, setLiftgate] = useState(false)
  const [window, setWindow] = useState("")
  const set = (liftgate ? 1 : 0) + (window ? 1 : 0)

  return (
    <div className="grid max-w-[420px] gap-4">
      <Field>
        <FieldLabel>Deliver to</FieldLabel>
        <FieldFrame>
          <FieldInput defaultValue="200 North Washington Avenue" />
        </FieldFrame>
      </Field>
      <Collapsible>
        <CollapsibleTrigger meta={set ? `${set} set` : undefined}>Delivery options</CollapsibleTrigger>
        <CollapsiblePanel className="grid gap-4">
          <SwitchField label="Liftgate truck" description="For a dock without a ramp." checked={liftgate} onCheckedChange={setLiftgate} />
          <Field>
            <FieldLabel>Delivery window</FieldLabel>
            <FieldFrame>
              <FieldInput value={window} onChange={(e) => setWindow(e.target.value)} placeholder="9:00 to 11:00" />
            </FieldFrame>
            <FieldDescription>Darryl plans the route the night before.</FieldDescription>
          </Field>
        </CollapsiblePanel>
      </Collapsible>
    </div>
  )
}

Installation

npx shadcn@latest add @keyline-ui/collapsible

Run it where your components.json is. The first time, map the @keyline-ui registry: one command, in Installation.

Usage

import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "@/components/keyline/ui/collapsible"

<Collapsible>
  <CollapsibleTrigger meta="2 set">Delivery options</CollapsibleTrigger>
  <CollapsiblePanel>…</CollapsiblePanel>
</Collapsible>

Props

Prop	Type	Default	Description
`open · defaultOpen · onOpenChange`	`boolean`	`false`	On `Collapsible`.
`meta`	`ReactNode`	`—`	On `CollapsibleTrigger`: what's hidden, in the code voice, such as a count.
`hiddenUntilFound`	`boolean`	`false`	On `CollapsiblePanel`: find-in-page opens it.

Built on Base UI Collapsible. For several sections in one frame, use Accordion.