Collapsible
Single expand/collapse region.
Usage
One region that expands and collapses. Bits renders the trigger as a real <button> and wires aria-expanded plus aria-controls pointing at the
panel — so the trigger already carries its own state and target. Your job is the label.
Ships in 2-3 business days. Free over $50.
Controlled
open is bindable, so you can read the state to change the label or drive
something else on the page.
Panel body content.
open: false
Collapsible vs Accordion
Collapsible is one independent region. Accordion is a set of regions that know about each other — it
can enforce that only one is open at a time and gives you arrow-key navigation between triggers.
A row of Collapsibles is not an Accordion. It has no shared state and no keyboard relationship between the triggers, so if the panels belong to one set, reach for Accordion.
Props
Collapsible.Root — open is bindable.
| Prop | Type | Default |
|---|---|---|
open Whether the panel is open. Bindable. | boolean | false |
disabled | boolean | false |
class Extra classes merged onto the root. | string | — |
child bits-ui | Snippet<[{ props: Record<string, unknown>; }]> | undefined | — |
children bits-ui | Snippet<[]> | undefined | — |
id bits-ui | string | undefined | — |
onOpenChange bits-ui A callback function called when the open state changes. | OnChangeFn<boolean> | undefined | — |
onOpenChangeComplete bits-ui A callback function called when the open state changes complete. | OnChangeFn<boolean> | undefined | — |
ref bits-ui | HTMLElement | null | undefined | — |
Collapsible.Trigger
| Prop | Type | Default |
|---|---|---|
class Extra classes merged onto the trigger. | string | — |
child bits-ui | Snippet<[{ props: Record<string, unknown>; }]> | undefined | — |
children bits-ui | Snippet<[]> | undefined | — |
id bits-ui | string | undefined | — |
ref bits-ui | HTMLElement | null | undefined | — |
Collapsible.Content
| Prop | Type | Default |
|---|---|---|
class Extra classes merged onto the panel. | string | — |
child bits-ui | Snippet<[CollapsibleContentSnippetProps & { props: Record<string, unknown>; }]> | … | — |
children bits-ui | Snippet<[]> | undefined | — |
forceMount bits-ui Whether to force mount the content to the DOM. | boolean | undefined | false |
hiddenUntilFound bits-ui Whether to allow the browser to expand the content when searching for content within the panel via the browser's built-in search functionality. When `true`, this prop will override the `forceMount` prop. | boolean | undefined | true |
id bits-ui | string | undefined | — |
ref bits-ui | HTMLElement | null | undefined | — |