Clinia UI

Collapsible

Shows and hides one section of content.

shadcn docs →

When to use

  • Show or hide one section of secondary content: a sync log, advanced settings, the details of a failed source.

When not to use

  • Several sections under headings: use Accordion.
  • Views of the same subject: use Tabs.
  • An error users must act on: show it with Alert.

Install

npx shadcn@latest add @clinia/collapsible
3 sources failed to sync

Anatomy

Failed
Lab results
Imaging
  1. 1Triggerdata-slot="collapsible-trigger"ghost icon-sm Button · or outline sm Button with text
  2. 2Contentdata-slot="collapsible-content"unstyled

Clinia rules

  • It ships no styles. Render the trigger as a Button and lay out the content yourself.
  • The trigger says what it reveals: Show sync log, not Details.
  • Open it by default (defaultOpen) when most users need the content.

Do and don't

Imaging failed to sync

Do collapse secondary details, and keep the problem visible.
Don't hide an error users need to act on.

Accessibility

Built in

  • The trigger sets aria-expanded, and Enter or Space toggles it.

Your responsibility

  • Keep the trigger right before the content it controls, so the link between them is visible.
  • Give an icon-only trigger an aria-label that says what it reveals.

How to test

  1. Press Tab to the trigger, then Enter or Space: the content opens. Press again: it closes.
  2. With a screen reader, the trigger is announced as collapsed or expanded.
  3. With the content open, press Tab: focus moves into it.

API

Every prop comes from Base UI Collapsible.

Related