Source: https://www.radix-ui.com/primitives/docs/components/collapsible

Radix Homepage

Made by WorkOS

Radix Homepage

Made by WorkOS

ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors

Documentation Case studies Blog

Search

/

Overview

Introduction Getting started Accessibility Releases

Guides

Styling Animation Composition Server-side rendering

Components

Accordion Alert Dialog Aspect Ratio Avatar Checkbox Collapsible Context Menu Dialog Dropdown Menu Form

Preview Hover Card Label Menubar Navigation Menu One-Time Password Field

Preview Password Toggle Field

Preview Popover Progress Radio Group Scroll Area Select Separator Slider Switch Tabs Toast Toggle Toggle Group Toolbar Tooltip

Utilities

Accessible Icon Direction Provider Portal Slot Visually Hidden

Components

Collapsible

An interactive component which expands/collapses a panel.

@peduarte starred 3 repositories

@radix-ui/primitives

index.jsxindex.jsxstyles.cssstyles.css

CSS

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.

Installation

---

Install the component from your command line.

npm install @radix-ui/react-collapsible

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<br><br>Prop description | boolean | false | | defaultOpen<br><br>Prop description | boolean | No default value | | open<br><br>Prop description | boolean | No default value | | onOpenChange<br><br>Prop description | function<br><br>See full type | No default value | | disabled<br><br>Prop description | 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<br><br>Prop description | 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<br><br>Prop description | boolean | false | | forceMount<br><br>Prop description | 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;
	}
}

Accessibility

---

Adheres to the Disclosure WAI-ARIA design pattern .

Keyboard Interactions

| Key | Description | | --- | --- | | Space | Opens/closes the collapsible. | | Enter | Opens/closes the collapsible. |

PreviousCheckbox

NextContext Menu

Edit this page on GitHub.