Collapsible

Collapsible is a self-contained disclosure: clicking the title header toggles its children open or closed, with a chevron that rotates to match. State is managed internally (built on Headless UI's Disclosure), so just set defaultOpen to control the initial state. Use it for "show more" sections, FAQs, or optional settings. For grouped sections where opening one closes the others, use Accordion.

Example

import { Collapsible } from '@officina/ui';

function Faq() {
  return (
    <Collapsible title="What is included?" defaultOpen>
      Every primitive ships with TypeScript types and theming support.
    </Collapsible>
  );
}

API