Radix homepageRadix Homepage
PrimitivesBeta

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

The button that toggles the collapsible.

PropTypeDefault
asChildbooleanfalse

The component that contains the collapsible content.

PropTypeDefault
asChildbooleanfalse
forceMountbooleanNo default value

We expose a CSS custom property --radix-collapsible-content-height.
Use it to animate the height of the content when it opens/closes.

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, {
'&[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.