HextaUI

Collapsible: Disabled

disabled on the root keeps the panel in its current state and makes the trigger ignore clicks and keys.

@preetsuthar17 starred 3 repositories

@radix-ui/primitives
import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
  CollapsibleTriggerIcon,
} from "@/components/ui/collapsible"

export function CollapsibleDisabled() {
  return (
    <Collapsible disabled className="flex w-full max-w-sm flex-col gap-2">
      <div className="flex items-center justify-between gap-4 ps-4">
        <h4 className="text-sm font-semibold">
          <span dir="ltr">@preetsuthar17</span> starred 3 repositories
        </h4>
        <CollapsibleTrigger
          render={<Button variant="ghost" size="icon-sm" />}
          aria-label="Toggle repositories"
        >
          <CollapsibleTriggerIcon />
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-2 font-mono text-sm">
        <span dir="ltr">@radix-ui/primitives</span>
      </div>
      <CollapsibleContent className="flex flex-col gap-2">
        <div className="rounded-md border px-4 py-2 font-mono text-sm">
          <span dir="ltr">@base-ui/react</span>
        </div>
        <div className="rounded-md border px-4 py-2 font-mono text-sm">
          <span dir="ltr">@tabler/icons</span>
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}

This adds the example as components/examples/collapsible/disabled.tsx, together with the Collapsible component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/collapsible-disabled.json

To add only the component, follow the Collapsible installation.

Props in this example

The Collapsible props this example sets, from the API reference.

PropTypeDefault
disabled
booleanfalse
PropTypeDefault
renderUsually a Button.
ReactElement | (props, state) => ReactElement<button>
PropTypeDefault
classNameApplied to the inner wrapper, so padding never fights the height animation.
string–

Every prop is in the Collapsible API reference.

See them all, with keyboard support and accessibility notes, on the Collapsible page.