Skip to Content
FrontendBundlesComponentsUI PrimitivesCollapsible

Collapsible

An expandable/collapsible container built on Radix UI Collapsible. Useful for FAQs, sidebars, or any progressive disclosure pattern.

Import

import {
  Collapsible, CollapsibleTrigger, CollapsibleContent,
} from "@phpcreation/frontend-components-react-nextjs-bundle/components/Collapsible";

Props

All Radix UI Collapsible props:

PropTypeDefaultDescription
openboolean—Controlled open state
defaultOpenbooleanfalseUncontrolled default
onOpenChange(open: boolean) => void—Change handler
disabledbooleanfalsePrevent toggling

Usage

import { useState } from "react";
import {
  Collapsible, CollapsibleTrigger, CollapsibleContent,
} from "...";
import { Button } from "...";
import { LuChevronDown } from "react-icons/lu";
 
const [open, setOpen] = useState(false);
 
<Collapsible open={open} onOpenChange={setOpen}>
  <div className="flex items-center justify-between">
    <h4 className="font-medium">Advanced Options</h4>
    <CollapsibleTrigger asChild>
      <Button variant="ghost" size="icon">
        <LuChevronDown
          className={`transition-transform ${open ? "rotate-180" : ""}`}
        />
      </Button>
    </CollapsibleTrigger>
  </div>
  <CollapsibleContent className="mt-4 space-y-4">
    {/* advanced content */}
  </CollapsibleContent>
</Collapsible>
Last updated on
PopoverDialog