Collapsible

One section that shows and hides its content behind a trigger, without styling of its own.

A collapsible shows or hides one piece of content behind a trigger: the rest of a list, advanced options, details of a row. It has no look of its own; you style the trigger and the content. For a set of sections that behave together, use an accordion. This site uses a collapsible for the full type of a prop in every API list.

Show the rest of a listClient

Scheme rules

Contribution rate 7.5% of the pensionable salary

Full source examples/ui/collapsible.tsx

// apps/docs/examples/ui/collapsible.tsx'use client';
import {useState} from 'react';import {ChevronsUpDownIcon} from 'lucide-react';
import {Button} from '@workspace/active-ui/components/primitives/button';import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from '@workspace/active-ui/components/primitives/collapsible';
const RULES = [  'Contribution rate 7.5% of the pensionable salary',  'A franchise set each year by law',  'Retirement at the state pension age',  'Partner pension of 70% of the old-age pension',];
/** * One section that shows and hides itself: the first rule is always shown, * the rest behind a button that says what it does. The open state is * controlled here, to change the label. */export default function CollapsibleExample() {  const [open, setOpen] = useState(false);  return (    <Collapsible      open={open}      onOpenChange={setOpen}      className="flex w-full max-w-sm flex-col gap-2"    >      <div className="flex items-center justify-between gap-4">        <h4 className="text-sm font-semibold">Scheme rules</h4>        <CollapsibleTrigger render={<Button variant="ghost" size="sm" />}>          <ChevronsUpDownIcon data-icon="inline-start" aria-hidden />          {open ? 'Show less' : `Show all ${RULES.length}`}        </CollapsibleTrigger>      </div>      <p className="rounded-md border px-3 py-2 text-sm">{RULES[0]}</p>      <CollapsibleContent className="flex flex-col gap-2">        {RULES.slice(1).map((rule) => (          <p key={rule} className="rounded-md border px-3 py-2 text-sm">            {rule}          </p>        ))}      </CollapsibleContent>    </Collapsible>  );}

Usage#

TSX

import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from '@workspace/active-ui/components/primitives/collapsible';
<Collapsible>  <CollapsibleTrigger render={<Button variant="ghost" size="sm" />}>    Show all rules  </CollapsibleTrigger>  <CollapsibleContent>…</CollapsibleContent></Collapsible>;

Anatomy#

Collapsible: the state; open and onOpenChange (controlled) or defaultOpen; disabled.
CollapsibleTrigger: the button; render makes your own button the trigger. It carries data-panel-open while open, to turn an icon.
CollapsibleContent: the content, removed while closed unless keepMounted, and hiddenUntilFound for content the browser's find should reach.

What your application provides#

A trigger label that says what happens, and that changes with the state when it helps ("Show all 4", "Show less").
The styling of both parts.

Accessibility and keyboard#

The trigger is a button with aria-expanded that controls the content; Enter and Space toggle it.

API#

Collapsible

All props come from the Base UI part this component is built on.

Props

open

Type: boolean

Whether the collapsible panel is currently open.

To render an uncontrolled collapsible, use the defaultOpen prop instead.

defaultOpen

Type: boolean
Default: false

Whether the collapsible panel is initially open.

To render a controlled collapsible, use the open prop instead.

disabled

Type: boolean
Default: false

Whether the component should ignore user interaction.

render

Type: ComponentRenderFn<…>ReactElement<…>

Allows you to replace the component's HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.

Events

Called by the component when something happens.

onOpenChange

Type: (open, eventDetails) => void

Event handler called when the panel is opened or closed.

Other props, such as the standard attributes of the underlying element, className and ref, are passed through.

CollapsibleTrigger

All props come from the Base UI part this component is built on.

Props

nativeButton

Type: boolean
Default: true

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).

render

Type: ComponentRenderFn<…>ReactElement<…>

Allows you to replace the component's HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.

Other props, such as the standard attributes of the underlying element, className and ref, are passed through.

CollapsibleContent

All props come from the Base UI part this component is built on.

Props

hiddenUntilFound

Type: boolean
Default: false

Allows the browser's built-in page search to find and expand the panel contents.

Overrides the keepMounted prop and uses hidden="until-found" to hide the element without removing it from the DOM.

keepMounted

Type: boolean
Default: false

Whether to keep the element in the DOM while the panel is hidden. This prop is ignored when hiddenUntilFound is used.

render

Type: ComponentRenderFn<…>ReactElement<…>

Allows you to replace the component's HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.

Other props, such as the standard attributes of the underlying element, className and ref, are passed through.

Based on shadcn/ui

This page adapts the Collapsible documentation of shadcn/ui (MIT licence) to this package; see Third-party notices.