Collapsible

An interactive component which expands/collapses a panel.

tsx

1
2
3
4
5
6
7
8
9
10<div className="w-full max-w-md">
  <Collapsible>
    <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
    <CollapsibleContent>
      <div className="mt-2 rounded-md border p-3 text-sm">
        Yes. Free to use for personal and commercial projects. No attribution required.
      </div>
    </CollapsibleContent>
  </Collapsible>
</div>

Collapsible is a single block that expands and collapses (an accordion, but standalone, with no siblings). Useful for a "show more" toggle or an optional advanced panel.

For several stacked sections, use Accordion instead.

Installation

Terminal

$ bext ui add collapsible

Copy and paste the following into src/components/ui/collapsible.tsx.

collapsible.tsx

1
2
3
4
5
6
7
8
9
10<div className="w-full max-w-md">
  <Collapsible>
    <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
    <CollapsibleContent>
      <div className="mt-2 rounded-md border p-3 text-sm">
        Yes. Free to use for personal and commercial projects. No attribution required.
      </div>
    </CollapsibleContent>
  </Collapsible>
</div>

This component is interactive. Make sure the shared island is loaded (see Islands). It reacts to data-ui="collapsible" hooks.

Usage

tsx

1
2
3
4
5
6import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@bext-stack/ui/primitives"

<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>Yes. Free to use for personal and commercial projects.</CollapsibleContent>
</Collapsible>

Anatomy

<Collapsible open?>
  ├── <CollapsibleTrigger>Show more</CollapsibleTrigger>
  └── <CollapsibleContent>Hidden content...</CollapsibleContent>

API Reference

Collapsible

Prop	Type	Default	Description
open	boolean	false	Renders the open state in the HTML: the content is visible and the trigger carries data-state="open" and aria-expanded="true".
children	ReactNode	—	A CollapsibleTrigger and a CollapsibleContent.
className	string	—	Extra classes on the wrapper <div>, which has no classes of its own.

CollapsibleTrigger

Prop	Type	Default	Description
children	ReactNode	—	Content of the <button> that opens and closes the panel.
open	boolean	false	Open state of the trigger alone. Not needed when open is set on Collapsible.
id	string	—	id of the button.
controls	string	—	id of the content, written to aria-controls. Set by the island when omitted.

CollapsibleContent

Prop	Type	Default	Description
open	boolean	false	Renders the panel visible on load. Not needed when open is set on Collapsible.
id	string	—	id of the panel. Generated by the island when omitted.
children	ReactNode	—	The collapsible content.

Data Attributes

Attributes you can target in custom CSS to override the style for each state.

Attribute	On	Values	Description
data-ui="accordion-item"	Collapsible root	—	Collapsible reuses the accordion hooks of the island.
data-ui="accordion-trigger"	CollapsibleTrigger	—	Clicking toggles the panel.
data-state	Collapsible root, CollapsibleTrigger	"open" \| "closed"	Current state, rendered from open and updated by the island.
aria-expanded	CollapsibleTrigger	"true" \| "false"	Same state, for assistive technologies.
data-ui="accordion-content"	CollapsibleContent	hidden attribute present or absent	The island shows the panel by removing hidden.
data-slot	every sub-component	"collapsible" \| "collapsible-trigger" \| "collapsible-content"	Stable selector for custom styling.

Keyboard

Key	Action
`Enter / Space`	Opens or closes.

Accessibility

The trigger is a native <button type="button"> with aria-expanded, rendered from open and kept in sync by the island, and aria-controls pointing at the content. The island generates the id of the content when you do not pass one. The content carries the hidden attribute when closed, which keeps it out of the accessibility tree.

Examples

Open on load

Orders placed before noon leave the same day.

tsx

1
2
3
4
5
6<Collapsible open>
  <CollapsibleTrigger>Shipping details</CollapsibleTrigger>
  <CollapsibleContent>
    <div className="mt-2 rounded-md border p-3 text-sm">Orders placed before noon leave the same day.</div>
  </CollapsibleContent>
</Collapsible>

Try it live

Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom: fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// A normal PRISM server page. The island below is rendered to HTML on the
// server, then hydrated on the client - only the signal-bound nodes update.
export default function Page() {
  return (
    <main style="max-width:680px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif;color:#0a0a0a">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Collapsible</h1>
      <p style="color:#64748b;margin-top:0">A trigger toggles a region in/out of the DOM via &lt;Show&gt; (reactive).</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals: fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Showcase from "../components/Showcase";

// A single region that expands and collapses on a trigger click.
// The open/closed state lives in a "use client" island.
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Collapsible</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>An expandable region toggled by its header.</p>
      <Showcase />
    </main>
  );
}

The React idiom: same UI, for comparison.

← Checkbox Combobox →

On This Page