@biem/ui

Collapsible

A section of content that users show and hide with a trigger.

A collapsible keeps a section of content closed until users open it with the trigger, and a second press closes it again. The page stays short, and users read the details in place when they need them. The parts have no styles of their own, so the examples render the trigger as a Button.

Transfer #4821

StatusIn transit

Usage

collapsible-default.tsx
import { Button } from "@biem/ui/components/ui/button";
import {
	Collapsible,
	CollapsibleContent,
	CollapsibleTrigger,
} from "@biem/ui/components/ui/collapsible";
import { IconSelector } from "@tabler/icons-react";

export function CollapsibleDefault() {
	return (
		<Collapsible className="flex w-[350px] flex-col gap-2">
			<div className="flex items-center justify-between gap-4 px-4">
				<h4 className="text-sm font-semibold">Transfer #4821</h4>
				<CollapsibleTrigger render={<Button variant="ghost" size="icon"/>}>
					<IconSelector/>
					<span className="sr-only">Toggle details</span>
				</CollapsibleTrigger>
			</div>
			<div className="flex items-center justify-between rounded-md border px-4 py-2 text-sm">
				<span className="text-muted-foreground">Status</span>
				<span className="font-medium">In transit</span>
			</div>
			<CollapsibleContent className="flex flex-col gap-2">
				<div className="rounded-md border px-4 py-2 text-sm">
					<p className="font-medium">Destination</p>
					<p className="text-muted-foreground">Basel</p>
				</div>
				<div className="rounded-md border px-4 py-2 text-sm">
					<p className="font-medium">Cases</p>
					<p className="text-muted-foreground">12</p>
				</div>
			</CollapsibleContent>
		</Collapsible>
	);
}

Examples

Open by Default

Some details matter as soon as a page opens. The collapsible then starts open through defaultOpen, and users close it once the details have served their purpose.

Transfer #4821

StatusIn transit

Destination

Basel

Cases

12

Controlled

Sometimes the application decides whether the details are visible. Through open and onOpenChange it holds that state, so other parts of the interface can open or close the collapsible as well, for example a link that leads users straight to the details.

Transfer #4821

StatusIn transit

API Reference

Collapsible

Propopen
Typeboolean
Default–
DescriptionSets whether the collapsible is open and makes it controlled. Update it in onOpenChange.
PropdefaultOpen
Typeboolean
Defaultfalse
DescriptionOpens the collapsible at first render. The collapsible then tracks its open state itself.
ProponOpenChange
Type(open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void
Default–
DescriptionRuns when users open or close the collapsible. It receives the open state that follows.
Propdisabled
Typeboolean
Defaultfalse
DescriptionPrevents users from opening or closing the collapsible. The trigger stays focusable.
Proprender
TypeReactElement | render function
Default–
DescriptionReplaces the native element or composes the collapsible with another component.

CollapsibleTrigger

Proprender
TypeReactElement | render function
Default–
DescriptionReplaces the native element or composes the trigger with another component.
PropnativeButton
Typeboolean
Defaulttrue
DescriptionDeclares whether the rendered element is a native button. Set it to false when render returns a different element.
Propdisabled
Typeboolean
Default–
DescriptionPrevents users from opening or closing the collapsible with this trigger. Without it, the trigger uses the value set on the collapsible.

CollapsibleContent

ProphiddenUntilFound
Typeboolean
Defaultfalse
DescriptionLets the browser's page search find text in the closed content and open the collapsible. The closed content then stays in the DOM, and keepMounted has no effect.
PropkeepMounted
Typeboolean
Defaultfalse
DescriptionKeeps the content in the DOM while the collapsible is closed. It has no effect when hiddenUntilFound is set.
Proprender
TypeReactElement | render function
Default–
DescriptionReplaces the native element or composes the content with another component.

On this page

IntroductionUsageExamplesOpen by DefaultControlledAPI ReferenceCollapsibleCollapsibleTriggerCollapsibleContent