Components

Collapsible

An interactive component which expands/collapses a panel.

import React from 'react';
import * as Collapsible from '@radix-ui/react-collapsible';
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">@stitches/react</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 * as Collapsible from '@radix-ui/react-collapsible';
export default () => (
<Collapsible.Root>
<Collapsible.Trigger />
<Collapsible.Content />
</Collapsible.Root>
);

API Reference

Root

Contains all the parts of a collapsible.

PropTypeDefault
asChildbooleanfalse
defaultOpenbooleanNo default value
openbooleanNo default value
onOpenChangefunctionNo default value
disabledbooleanNo default value
Data attributeValues
[data-state]"open" | "closed"
[data-disabled]

Present when disabled

Trigger

The button that toggles the collapsible.

PropTypeDefault
asChildbooleanfalse
Data attributeValues
[data-state]"open" | "closed"
[data-disabled]

Present when disabled

Content

The component that contains the collapsible content.

PropTypeDefault
asChildbooleanfalse
forceMountbooleanNo default value
Data attributeValues
[data-state]"open" | "closed"
[data-disabled]

Present when disabled

CSS VariableDescription
--radix-collapsible-content-widthThe width of the content when it opens/closes
--radix-collapsible-content-heightThe 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 * as Collapsible from '@radix-ui/react-collapsible';
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

KeyDescription
Space
Opens/closes the collapsible.
Enter
Opens/closes the collapsible.