Collapsible

Collapsible toggles the visibility of a section of content. Use for secondary details that only some users need; for a list of collapsible items, use Accordion.

Code

(() => {
  function CollapsiblePrimary() {
    const [open, setOpen] = React.useState(false);

    return (
      <Collapsible className="tw:space-y-2" open={open} onOpenChange={setOpen}>
        <div className="tw:flex tw:items-center tw:justify-between tw:space-x-4 tw:px-4">
          <h4 className="tw:text-sm tw:font-semibold">
            ORD-1042 includes 3 product lines
          </h4>

          <CollapsibleTrigger
            render={<Button variant="ghost" size="icon-sm" />}
          >
            <ChevronsUpDownIcon />
            <span className="tw:sr-only">Toggle product lines</span>
          </CollapsibleTrigger>
        </div>

        <div className="tw:rounded-md tw:border tw:border-border tw:px-4 tw:py-3 tw:text-sm">
          Corn seed - 48 bags
        </div>

        <CollapsibleContent className="tw:space-y-2">
          <div className="tw:rounded-md tw:border tw:border-border tw:px-4 tw:py-3 tw:text-sm">
            Starter fertilizer - 12 totes
          </div>

          <div className="tw:rounded-md tw:border tw:border-border tw:px-4 tw:py-3 tw:text-sm">
            Crop protection bundle - 6 cases
          </div>
        </CollapsibleContent>
      </Collapsible>
    );
  }

  return <CollapsiblePrimary />;
})();

API

Collapsible

Name	Type/Description
className	string | ((state: CollapsibleRootState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
defaultOpen = false	boolean | undefined Whether the collapsible panel is initially open. To render a controlled collapsible, use the `open` prop instead.
disabled = false	boolean | undefined Whether the component should ignore user interaction.
onOpenChange	((open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void) | undefined Event handler called when the panel is opened or closed.
open	boolean | undefined Whether the collapsible panel is currently open. To render an uncontrolled collapsible, use the `defaultOpen` prop instead.
ref	((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CollapsibleRootState> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	CSSProperties | ((state: CollapsibleRootState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.

CollapsibleContent

Name	Type/Description
className	string | ((state: CollapsiblePanelState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
hiddenUntilFound = false	boolean | undefined Allows the browser's built-in page search to find and expand the panel contents. Overrides the `keepMounted` prop and uses `hidden="until-found"` to hide the element without removing it from the DOM.
keepMounted = false	boolean | undefined Whether to keep the element in the DOM while the panel is hidden. This prop is ignored when `hiddenUntilFound` is used.
ref	((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CollapsiblePanelState> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	CSSProperties | ((state: CollapsiblePanelState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.

CollapsibleTrigger

Name	Type/Description
className	string | ((state: CollapsibleTriggerState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
nativeButton = true	boolean | undefined Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
ref	((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CollapsibleTriggerState> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	CSSProperties | ((state: CollapsibleTriggerState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.