Skip to main content
Collapsible component preview (light)
  • Location: sabo/src/components/ui/collapsible.tsx

​
When to use

  • Show/hide a small chunk of content (filters, advanced options).
  • Lighter than Accordion; you control trigger/button UI.

​
Usage

sabo/src/components/ui/collapsible.tsx
import {
  Collapsible, CollapsibleTrigger, CollapsibleContent
} from "@/components/ui/collapsible";
import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <Collapsible>
      <div className="flex items-center justify-between">
        <h4 className="font-medium">Details</h4>
        <CollapsibleTrigger asChild>
          <Button variant="outline" size="sm">Toggle</Button>
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent className="mt-3 text-sm text-muted-foreground">
        Hidden content goes here.
      </CollapsibleContent>
    </Collapsible>
  );
}

​
Key props

​
defaultOpen
boolean
Initial open/closed state.
​
asChild
boolean
Render trigger/content as child elements.
This component forwards all props from Radix Collapsible primitives (Root/Trigger/Content). Above are commonly used props. For the full API, see Radix docs: https://www.radix-ui.com/primitives/docs/components/collapsible

​
Styling tip

  • Provide clear visual feedback on open/close (icons, text).
  • Keep content short; for larger sections use Accordion.

​
Accessibility

  • Ensure the trigger is focusable; announce state via aria-expanded if you customize markup.