Collapsible

Used to expand and collapse additional content.

Usage

import { Collapsible } from "chakra-ui-solid";

<Collapsible.Root>
  <Collapsible.Trigger>
    <Collapsible.Indicator />
  </Collapsible.Trigger>
  <Collapsible.Content />
</Collapsible.Root>

Examples

Initial Open

Use the defaultOpen prop to render the collapsible in an open state by default.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Partial Height

Use the collapsedHeight prop to show a preview of the content when collapsed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Disabled

Use the disabled prop to prevent the collapsible from being toggled.

Controlled

Use the open and onOpenChange props to control the collapsible state.

Status: Closed

Store

An alternative way to control the collapsible is to use the RootProvider component and the createCollapsible store hook.

State: Collapsed

Lazy Mounted

Use the unmountOnExit prop to make the content unmount when collapsed.

Guides

Accessing collapsible context

Use useCollapsibleContext to access the collapsible’s state and methods from any component inside the collapsible.

import { Collapsible, useCollapsibleContext } from "chakra-ui-solid";
 
function CollapsibleStatus() {
  const collapsible = useCollapsibleContext();
 
  return <div>Collapsible is {collapsible.open ? "open" : "closed"}</div>;
}
 
function MyCollapsible() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>
        <CollapsibleStatus />
      </Collapsible.Content>
    </Collapsible.Root>
  );
}

Closing programmatically

Use setOpen(false) from the context to close the collapsible programmatically.

import { Button, Collapsible, useCollapsibleContext } from "chakra-ui-solid";
 
function CloseButton() {
  const collapsible = useCollapsibleContext();
 
  return <Button onClick={() => collapsible.setOpen(false)}>Close Collapsible</Button>;
}
 
function MyCollapsible() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>
        <CloseButton />
      </Collapsible.Content>
    </Collapsible.Root>
  );
}

Content Padding

To prevent janky animations when the collapsible expands or collapses, apply padding to the inner content element rather than directly on Collapsible.Content to prevent visual stuttering as its animations.

DO THIS:

<Collapsible.Root>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content>
    <Box padding="4" borderWidth="1px">
      {/* Content here */}
    </Box>
  </Collapsible.Content>
</Collapsible.Root>

NOT THIS:

<Collapsible.Root>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  {/* ❌ Avoid applying padding directly to Content */}
  <Collapsible.Content padding="4" borderWidth="1px">
    {/* Content here */}
  </Collapsible.Content>
</Collapsible.Root>

Props

Root

CollapsibleRootProps
Prop	Default	Type
`collapsedHeight`	—	`number \| string` How tall the content stays when closed, instead of collapsing away entirely — the "read more" shape. The content keeps its box and its tabbable children are made `inert`.
`collapsedWidth`	—	`number \| string` The horizontal counterpart of {@link CreateCollapsibleProps.collapsedHeight}.
`defaultOpen`	—	`boolean` The open state a fresh, uncontrolled collapsible starts in.
`disabled`	—	`boolean` Whether the trigger ignores clicks.
`id`	—	`string` Seeds every id the machine hands out — the root is `collapsible:{id}`, the content `collapsible:{id}:content`, the trigger `collapsible:{id}:trigger`. Defaults to a generated id, and does not become the root element's own `id`: pass `ids` to control the attributes themselves.
`ids`	—	`CollapsibleElementIds` Override individual element ids, for pointing an ARIA relationship at a specific one.
`lazyMount`	`false`	`boolean` Keep the content out of the DOM entirely until the collapsible first opens.
`onExitComplete`	—	`VoidFunction` Called once the exit animation has finished and the content is fully closed.
`onOpenChange`	—	`(details: CollapsibleOpenChangeDetails) => void` Called whenever the open state changes, from either side.
`open`	—	`boolean` The controlled open state. Pass `undefined` for uncontrolled.
`unmountOnExit`	`false`	`boolean` Take the content back out of the DOM once it has closed and its exit animation has finished, rather than leaving it there hidden.

Plus Omit<HTMLChakraProps<"div">, "id"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

RootProvider

CollapsibleRootProviderProps
Prop	Default	Type
`value`*	—	`CreateCollapsibleReturn` A machine built by {@link createCollapsible}, so the consumer owns it rather than the Root.

Plus HTMLChakraProps<"div"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

Context

CollapsibleContextProps
Prop	Default	Type
`children`*	—	`(collapsible: CreateCollapsibleReturn) => JSX.Element` Receives the machine, so a consumer can read its state without a component of their own.

Plus the three every component takes: as, render and unstyled.

createCollapsible

CreateCollapsibleProps
Prop	Default	Type
`collapsedHeight`	—	`number \| string` How tall the content stays when closed, instead of collapsing away entirely — the "read more" shape. The content keeps its box and its tabbable children are made `inert`.
`collapsedWidth`	—	`number \| string` The horizontal counterpart of {@link CreateCollapsibleProps.collapsedHeight}.
`defaultOpen`	—	`boolean` The open state a fresh, uncontrolled collapsible starts in.
`disabled`	—	`boolean` Whether the trigger ignores clicks.
`id`	—	`string` Seeds every id the machine hands out — the root is `collapsible:{id}`, the content `collapsible:{id}:content`, the trigger `collapsible:{id}:trigger`. Defaults to a generated id, and does not become the root element's own `id`: pass `ids` to control the attributes themselves.
`ids`	—	`CollapsibleElementIds` Override individual element ids, for pointing an ARIA relationship at a specific one.
`lazyMount`	`false`	`boolean` Keep the content out of the DOM entirely until the collapsible first opens.
`onExitComplete`	—	`VoidFunction` Called once the exit animation has finished and the content is fully closed.
`onOpenChange`	—	`(details: CollapsibleOpenChangeDetails) => void` Called whenever the open state changes, from either side.
`open`	—	`boolean` The controlled open state. Pass `undefined` for uncontrolled.
`unmountOnExit`	`false`	`boolean` Take the content back out of the DOM once it has closed and its exit animation has finished, rather than leaving it there hidden.

Plus the three every component takes: as, render and unstyled.