Collapsible

An interactive component which expands/collapses a panel.

@peduarte starred 3 repositories

@radix-ui/primitives

import * as React from "react";
import { Collapsible } from "radix-ui";
import { RowSpacingIcon, Cross2Icon } from "@radix-ui/react-icons";
import "./styles.css";
const CollapsibleDemo = () => {
	const [open, setOpen] = React.useState(false);
	return (
		<Collapsible.Root
			className="CollapsibleRoot"
			open={open}
			onOpenChange={setOpen}
		>
<div
				style={{
					display: "flex",
					alignItems: "center",
					justifyContent: "space-between",
				}}
			>
<span className="Text" style={{ color: "white" }}>
					@peduarte starred 3 repositories
</span>
<Collapsible.Trigger asChild>
<button className="IconButton">
{open ? <Cross2Icon /> : <RowSpacingIcon />}
</button>
</Collapsible.Trigger>
</div>
<div className="Repository">
<span className="Text">@radix-ui/primitives</span>
</div>
<Collapsible.Content>
<div className="Repository">
<span className="Text">@radix-ui/colors</span>
</div>
<div className="Repository">
<span className="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-ui";
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`	No default value
`open`	`boolean`	No default value
`onOpenChange`	`function`	No default value
`disabled`	`boolean`	No default value

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`	No default value

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.jsx
import { Collapsible } from "radix-ui";
import "./styles.css";
export default () => (
	<Collapsible.Root>
<Collapsible.Trigger>…</Collapsible.Trigger>
<Collapsible.Content className="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;
	}
}