Collapsible

An interactive component which expands/collapses a panel.

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

Create your styled collapsible component from the primitive parts.

import { styled } from 'path-to/stitches.config';
import * as Collapsible from '@radix-ui/react-collapsible';
const StyledContent = styled(Collapsible.CollapsibleContent, {
padding: 10,
marginTop: 10,
backgroundColor: 'gainsboro',
borderRadius: 6,
});
export default () => (
<Collapsible.Root>
<Collapsible.Trigger>Trigger</Collapsible.Trigger>
<StyledContent>Content 1</StyledContent>
</Collapsible.Root>
);

Contains all the parts of a collapsible.

PropTypeDefault
asenumdiv
defaultOpenbooleanNo default value
openbooleanNo default value
onOpenChangefunctionNo default value
disabledbooleanNo default value

The button that toggles the collapsible.

PropTypeDefault
asenumbutton

The component that contains the collapsible content.

PropTypeDefault
asenumdiv
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.

const slideDown = keyframes({
from: { height: 0 },
to: { height: 'var(--radix-collapsible-content-height)' },
});
const slideUp = keyframes({
from: { height: 'var(--radix-collapsible-content-height)' },
to: { height: 0 },
});
const StyledContent = styled(Collapsible.Content, {
'&[data-state="open"]': {
animation: `${slideDown} 300ms ease-out`,
},
'&[data-state="closed"]': {
animation: `${slideUp} 300ms ease-out`,
},
});

Adheres to the Disclosure WAI-ARIA design pattern.

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