Default (controlled)
import { useState } from 'react';
import {
Collapsible,
CollapsibleTrigger,
CollapsibleContent,
} from '@mihcm/ui/Collapsible';
import { Button } from '@mihcm/ui/Button';
const [open, setOpen] = useState(false);
<Collapsible open={open} onOpenChange={setOpen}>
<CollapsibleTrigger variant="ghost" size="md">
Toggle items
<svg
aria-hidden
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="m6 9 6 6 6-6" />
</svg>
</CollapsibleTrigger>
<CollapsibleContent padding="sm">
<p>Hidden content is now visible.</p>
</CollapsibleContent>
</Collapsible>Default open
Start expanded and allow the user to collapse.
This content is visible by default.
<Collapsible defaultOpen>
<CollapsibleTrigger asChild>
<Button variant="outline">Toggle</Button>
</CollapsibleTrigger>
<CollapsibleContent>
<p>This content is visible by default.</p>
</CollapsibleContent>
</Collapsible>Disclosure row
Use a full-width trigger with justify="between" for card rows and settings panels.
Keep compact HR details in a disclosure row when the content supports the current task but does not need to dominate the page.
<Collapsible defaultOpen className="rounded-lg border border-border bg-card shadow-mi-card">
<CollapsibleTrigger variant="plain" size="lg" justify="between" fullWidth className="px-4">
<span>Employment details</span>
<ChevronDownIcon />
</CollapsibleTrigger>
<CollapsibleContent variant="inset" padding="md">
Supporting information.
</CollapsibleContent>
</Collapsible>Filter panel
Use variant="outline" on the trigger and variant="panel" on content for expandable form controls.
<Collapsible>
<CollapsibleTrigger variant="outline" size="md" justify="between" fullWidth>
Advanced filters
<ChevronDownIcon />
</CollapsibleTrigger>
<CollapsibleContent variant="panel" padding="md" duration="slow">
{/* form fields */}
</CollapsibleContent>
</Collapsible>Compact icon trigger
Use size="icon" for dense interfaces where the label is already nearby.
Approver notes
<Collapsible className="flex items-start gap-3">
<CollapsibleTrigger variant="soft" size="icon" aria-label="Toggle details">
<ChevronDownIcon />
</CollapsibleTrigger>
<CollapsibleContent animation="fade" padding="sm">
Short inline details.
</CollapsibleContent>
</Collapsible>Disabled
Prevent toggling while preserving layout.
<Collapsible disabled>
<CollapsibleTrigger asChild>
<Button variant="ghost" disabled>Locked</Button>
</CollapsibleTrigger>
<CollapsibleContent>
<p>Cannot toggle.</p>
</CollapsibleContent>
</Collapsible>