Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

Collapsible

An interactive component which expands/collapses a panel.

@peduarte starred 3 repositories

@radix-ui/primitives

Styling solution Source file Download runnable sandbox

import { createSignal } from "solid-js";
import { Collapsible } from "@radix-solid/primitives";
import { RowSpacingIcon, Cross2Icon } from "@radix-solid/icons";
import styles from "./styles.module.css";
const CollapsibleDemo = () => {
  const [open, setOpen] = createSignal(false);
  return <Collapsible.Root class={styles.Root} open={open()} onOpenChange={setOpen}>
			<div style={{
      "display": "flex",
      "align-items": "center",
      "justify-content": "space-between"
    }}>
				<span class={styles.Text} style={{
        "color": "white"
      }}>
					@peduarte starred 3 repositories
				</span>
				<Collapsible.Trigger asChild>{target => target("button", {
          "class": styles.IconButton,
          children: <>
						{open() ? <Cross2Icon /> : <RowSpacingIcon />}
					</>
        })}</Collapsible.Trigger>
			</div>

			<div class={styles.Repository}>
				<span class={styles.Text}>@radix-ui/primitives</span>
			</div>

			<Collapsible.Content>
				<div class={styles.Repository}>
					<span class={styles.Text}>@radix-ui/colors</span>
				</div>
				<div class={styles.Repository}>
					<span class={styles.Text}>@radix-ui/themes</span>
				</div>
			</Collapsible.Content>
		</Collapsible.Root>;
};
export default CollapsibleDemo;

Features

Full keyboard navigation.
Can be controlled or uncontrolled.

Anatomy

Import the components and piece the parts together.

import { Collapsible } from "@radix-solid/primitives";
export default () => <Collapsible.Root>
		<Collapsible.Trigger />
		<Collapsible.Content />
	</Collapsible.Root>;

API Reference

Root

Contains all the parts of a collapsible.

Prop	Type	Default
`asChild`	`boolean`	`false`
`defaultOpen`	`boolean`	—
`open`	`boolean`	—
`onOpenChange`	`function`	—
`disabled`	`boolean`	—

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

Trigger

The button that toggles the collapsible.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

Content

The component that contains the collapsible content.

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	—

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

CSS Variable	Description
`--radix-collapsible-content-width`	The width of the content when it opens/closes
`--radix-collapsible-content-height`	The height of the content when it opens/closes

Examples

Animating content size

Use the --radix-collapsible-content-width and/or --radix-collapsible-content-height CSS variables to animate the size of the content when it opens/closes. Here's a demo:

// index.tsx
import { Collapsible } from "@radix-solid/primitives";
import "./styles.css";
export default () => <Collapsible.Root>
		<Collapsible.Trigger>…</Collapsible.Trigger>
		<Collapsible.Content class="CollapsibleContent">
			…
		</Collapsible.Content>
	</Collapsible.Root>;

/* styles.css */
.CollapsibleContent {
	overflow: hidden;
}
.CollapsibleContent[data-state="open"] {
	animation: slideDown 300ms ease-out;
}
.CollapsibleContent[data-state="closed"] {
	animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
	from {
		height: 0;
	}
	to {
		height: var(--radix-collapsible-content-height);
	}
}

@keyframes slideUp {
	from {
		height: var(--radix-collapsible-content-height);
	}
	to {
		height: 0;
	}
}

Accessibility

Adheres to the Disclosure WAI-ARIA design pattern.

Keyboard Interactions

Key	Description
`Space`	Opens/closes the collapsible.
`Enter`	Opens/closes the collapsible.