Collapsible

Show or hide a region of content with a controlled trigger — the primitive behind disclosures, FAQs, and inline expandables.

stable
since v0.1.0
2.5 kB
data-display
disclosure

Preview

Open

tsx

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ maxWidth: '24rem' }}>
      <Collapsible>
        <CollapsibleTrigger>Show more</CollapsibleTrigger>
        <CollapsibleContent>
          <p style={{ marginTop: '0.5rem' }}>
            Collapsible regions are useful for progressive disclosure — keep the default view tight
            and let users reveal extra detail on demand.
          </p>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}

Default open

Pass defaultOpen to render the content expanded on first paint without controlling state yourself.

Preview

Open

tsx

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ maxWidth: '24rem' }}>
      <Collapsible defaultOpen>
        <CollapsibleTrigger>Release notes</CollapsibleTrigger>
        <CollapsibleContent>
          <p style={{ marginTop: '0.5rem' }}>
            Version 0.2.0 ships the new Calendar primitive, an overhauled colour picker, and tighter
            focus rings across every interactive surface.
          </p>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}

Controlled

Pair open with onOpenChange to drive the state from the outside — handy when an external button or query param decides the open/close.

Preview

Open

tsx

import {
  Button,
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@arshad-shah/cynosure-react';
import { useState } from 'react';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <div style={{ maxWidth: '24rem', display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
      <div style={{ display: 'flex', gap: '0.5rem' }}>
        <Button size="sm" variant="outline" onClick={() => setOpen(true)}>
          Open
        </Button>
        <Button size="sm" variant="outline" onClick={() => setOpen(false)}>
          Close
        </Button>
      </div>
      <Collapsible open={open} onOpenChange={setOpen}>
        <CollapsibleTrigger>Toggle inline</CollapsibleTrigger>
        <CollapsibleContent>
          <p style={{ marginTop: '0.5rem' }}>
            The buttons above and the trigger below share the same state.
          </p>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}

Disabled

Pass disabled on Collapsible to freeze the current open state and prevent the trigger from firing.

Preview

Open

tsx

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ maxWidth: '24rem' }}>
      <Collapsible disabled>
        <CollapsibleTrigger>Locked panel</CollapsibleTrigger>
        <CollapsibleContent>
          <p style={{ marginTop: '0.5rem' }}>
            This content stays hidden — the trigger is disabled.
          </p>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}

API

PropTypeDefaultDescription

open

boolean

—

Controlled open state.

defaultOpen

boolean

—

Uncontrolled initial open state.

onOpenChange

((open: boolean) => void)

—

Fires with the next open state when toggled.

disabled

boolean

—

Disables the trigger and locks the panel in its current state.

Accessibility

The trigger sets aria-expanded and points aria-controls at the content region.
Content stays in the DOM with hidden toggled so assistive tech can re-announce it on every open.
Enter / Space on the focused trigger toggles the panel.
disabled propagates to the underlying <button> and ARIA — keyboard users skip past it.
The trigger renders as a real <button> (or your asChild host) so it inherits focus styles for free.

Recipes

Use asChild on CollapsibleTrigger to wrap a Button and inherit Cynosure styling without losing the toggle behaviour.
Use defaultOpen for uncontrolled state; pair open + onOpenChange to control externally.
The Disclosure / DisclosureTrigger / DisclosureContent aliases point at the same component when the semantic name fits better (e.g. FAQs).
Animate the open/close transition with the data-state="open" and data-state="closed" attributes on CollapsibleContent.