Radix homepage
Components

Collapsible

An interactive component which expands/collapses a panel.

import React from 'react';
import { styled } from '@stitches/react';
import { violet, blackA } from '@radix-ui/colors';
import { RowSpacingIcon, Cross2Icon } from '@radix-ui/react-icons';
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
const StyledCollapsible = styled(CollapsiblePrimitive.Root, {
width: 300,
});
// Exports
export const Collapsible = StyledCollapsible;
export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
export const CollapsibleContent = CollapsiblePrimitive.Content;
// Your app...
const Flex = styled('div', { display: 'flex' });
const Text = styled('span', {
color: violet.violet11,
fontSize: 15,
lineHeight: '25px',
});
const IconButton = styled('button', {
all: 'unset',
fontFamily: 'inherit',
borderRadius: '100%',
height: 25,
width: 25,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
color: violet.violet11,
boxShadow: `0 2px 10px ${blackA.blackA7}`,
'&[data-state="closed"]': { backgroundColor: 'white' },
'&[data-state="open"]': { backgroundColor: violet.violet3 },
'&:hover': { backgroundColor: violet.violet3 },
'&:focus': { boxShadow: `0 0 0 2px black` },
});
const Repository = styled('div', {
backgroundColor: 'white',
borderRadius: 4,
margin: '10px 0',
padding: 10,
boxShadow: `0 2px 10px ${blackA.blackA7}`,
});
export const CollapsibleDemo = () => {
const [open, setOpen] = React.useState(false);
return (
<Collapsible open={open} onOpenChange={setOpen}>
<Flex css={{ alignItems: 'center', justifyContent: 'space-between' }}>
<Text css={{ color: 'white' }}>@peduarte starred 3 repositories</Text>
<CollapsibleTrigger asChild>
<IconButton>{open ? <Cross2Icon /> : <RowSpacingIcon />}</IconButton>
</CollapsibleTrigger>
</Flex>
<Repository>
<Text>@radix-ui/primitives</Text>
</Repository>
<CollapsibleContent>
<Repository>
<Text>@radix-ui/colors</Text>
</Repository>
<Repository>
<Text>@stitches/react</Text>
</Repository>
</CollapsibleContent>
</Collapsible>
);
};
export default CollapsibleDemo;

Features

  • Full keyboard navigation.
  • Can be controlled or uncontrolled.

Install the component from your command line.

npm install @radix-ui/react-collapsible

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>
);

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

The button that toggles the collapsible.

PropTypeDefault
asChildbooleanfalse
Data AttributeValues
[data-state]"open" | "closed"
[data-disabled]Present when disabled

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

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 using Stitches:

import { styled, keyframes } from '@stitches/react';
import * as Collapsible from '@radix-ui/react-collapsible';
const open = keyframes({
from: { height: 0 },
to: { height: 'var(--radix-collapsible-content-height)' },
});
const close = keyframes({
from: { height: 'var(--radix-collapsible-content-height)' },
to: { height: 0 },
});
const CollapsibleContent = styled(Collapsible.Content, {
overflow: 'hidden',
'&[data-state="open"]': { animation: `${open} 300ms ease-out` },
'&[data-state="closed"]': { animation: `${close} 300ms ease-out` },
});
export default () => (
<Collapsible.Root>
<Collapsible.Trigger></Collapsible.Trigger>
<CollapsibleContent></CollapsibleContent>
</Collapsible.Root>
);

Adheres to the Disclosure WAI-ARIA design pattern.

KeyDescription
SpaceOpens/closes the collapsible.
EnterOpens/closes the collapsible.