Collapsible

Reveal optional content while keeping the primary surface compact.

The trigger is a real button and the primitive manages the expanded state and relationships for assistive technology.

Advanced booking options

Show codeCopy

Import

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@workshop1/ui/components/collapsible"

Composition

Use a controlled open state when the trigger icon or another control reflects expansion. Collapsible owns disclosure behaviour but intentionally leaves layout to its composition.

Accessibility

Keep CollapsibleTrigger as a button or compose it with a real button. The primitive manages aria-expanded and the relationship to its content. Write a trigger label that still makes sense in both states.

Best practices

• Hide secondary detail, not required form fields or errors.
• Use an accordion when several sibling sections share the same structure.
• Keep the revealed content close to its trigger.