elements
Manual UI Templates Collapsible

Collapsible

elements man ui/templates/collapsible

A trigger that shows and hides a region, with its height animated.

Example
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@elements/ui/collapsible";
import { Button } from "@elements/ui/button";
import { Icon } from "@elements/ui/icon";

<Collapsible>
  <div class="row">
    <h4>Order #4189</h4>
    <CollapsibleTrigger>
      <Button variant="ghost" icon size="sm" label="Toggle details"><Icon name="chevrons-up-down" /></Button>
    </CollapsibleTrigger>
  </div>
  <p>Status: Shipped</p>
  <CollapsibleContent>
    <p>Shipping address and items</p>
  </CollapsibleContent>
</Collapsible>

Parts

Part What it is
Collapsible The root. Owns open; the trigger and content parts can sit anywhere inside it.
CollapsibleTrigger Wraps the caller's button. Its first element gets aria-expanded, aria-controls and data-state; a click inside toggles. Plain text gets a native button.
CollapsibleContent The region that shows and hides. Hidden when closed; its height animates.
.collapsible-chevron Put on an <Icon> in the trigger to turn it with the state (is-right for a chevron-right that turns down).

Attributes

Collapsible

Attribute Type Default Description
open boolean (two-way) false Whether the content shows. Omit for uncontrolled; bind it to control it.
disabled boolean false The trigger is disabled and clicks do nothing.
onOpenChange (open: boolean, details: DisclosureDetails) => void () => {} Called when the trigger toggles it, before the change, with details second (reason, event, trigger, cancel(), isCanceled; reason trigger-press). details.cancel() keeps it as it was. Not called for changes the caller makes.
class string "" Extra classes on the root.

CollapsibleContent

Attribute Type Default Description
hiddenUntilFound boolean false Closed content stays searchable: find in page, or a link to its text, opens it.
class string "" Extra classes on the content.

Slots

Slot Part Content
default Collapsible Any markup, including the trigger and content parts.
default CollapsibleTrigger The trigger element: a <Button> or <button>, or plain text, which gets a native button.
default CollapsibleContent What shows when open.

Keyboard

Keys Action
Space Opens or closes it (on the trigger).
Enter Opens or closes it (on the trigger).

Data attributes

Attribute Values On Description
data-state "open" | "closed" root, trigger, content
data-disabled present when disabled root, trigger, content
data-open / data-closed present while open / closed root, content
data-panel-open present while the content is open trigger
data-animating present while the height animates content
data-starting-style / data-ending-style the first frames of an open / the whole close root, content
--content-height px content Measured height, for custom keyframes
--content-width px content Measured width

Accessibility

  • Follows the WAI-ARIA disclosure pattern: the trigger has aria-expanded and aria-controls pointing at the content.
  • Closed content is hidden, so its controls leave the tab order and screen readers skip it.
  • The server renders a closed collapsible with its content already hidden, so nothing moves when the page attaches.

See also