Collapsible

A button that shows and hides one region of content. For a set of headed sections, use Accordion.

import { Collapsible, Text } from "@meridui/react";

export function Example() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger>Show build details</Collapsible.Trigger>
      <Collapsible.Content>
        <Text tone="muted">
          Build 1024 finished in 2m 14s. 312 tests passed, 0 failed. Deployed to eu-central.
        </Text>
      </Collapsible.Content>
    </Collapsible.Root>
  );
}

Import

import { Collapsible } from "@meridui/react";

Anatomy

<Collapsible.Root>
  <Collapsible.Trigger />
  <Collapsible.Content />
</Collapsible.Root>

Root holds the open state and renders a <div>.
Trigger is a <button> with aria-expanded and aria-controls. With asChild it merges onto your own button.
Content is the region; it is hidden while closed and unmounts its children unless forceMount.

Examples

Controlled, with your own button

const [open, setOpen] = useState(false);

<Collapsible.Root open={open} onOpenChange={setOpen}>
  <Collapsible.Trigger asChild>
    <Button variant="secondary" size="sm">
      {open ? "Hide" : "Show"} 3 more repositories
    </Button>
  </Collapsible.Trigger>
  <Collapsible.Content>
    <ul>
      <li>northwind-web</li>
      <li>northwind-api</li>
      <li>northwind-docs</li>
    </ul>
  </Collapsible.Content>
</Collapsible.Root>

API reference

Root

Accepts every <div> attribute.

Prop	Type	Default	Description
`open`	`boolean`	–	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	–	Called when the open state should change.
`disabled`	`boolean`	`false`	Prevent toggling; the trigger is disabled.
`ref`	`Ref<HTMLDivElement>`	–	Forwarded ref to the root.

Trigger

Accepts every <button> attribute.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render the single child element instead of a <button>, merging props, ref and handlers.
`ref`	`Ref<HTMLButtonElement>`	–	Forwarded ref to the button.

Content

Accepts every <div> attribute.

Prop	Type	Default	Description
`forceMount`	`boolean`	`false`	Keep children mounted (hidden) while closed, e.g. to keep form state or allow find-in-page.
`ref`	`Ref<HTMLDivElement>`	–	Forwarded ref to the region.

Styling

Class	Element
`.mrd-collapsible`	Root
`.mrd-collapsible__trigger`	Trigger (unless `asChild`)
`.mrd-collapsible__content`	Content

Attribute	On	Values
`data-state`	Root, Trigger, Content	`open`, `closed`
`data-disabled`	Root, Trigger	present when disabled

Accessibility

Follows the WAI-ARIA Disclosure pattern. The trigger is a real button, so it works with Enter and Space and is announced with its expanded state.

Key	Action
`Enter`	Toggle the region.
`Space`	Toggle the region.

Guidelines

Say what will be shown: "Show build details", "Show 3 more repositories".

Avoid

Hide required form fields or error messages in a collapsed region.

Accordion: several headed sections.
Tabs: switch between panels of equal weight.