Collapsible

An interactive component which expands/collapses a panel.

Features

Full keyboard navigation.
Can be controlled or uncontrolled.

Installation

Install the component from your command line.

npm install @radix-ui/react-collapsible

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.Button />
    <Collapsible.Content />
  </Collapsible.Root>
);

import * as Collapsible from '@radix-ui/react-collapsible';
export default () => (
  <Collapsible.Root>
    <Collapsible.Button />
    <Collapsible.Content />
  </Collapsible.Root>
);

Basic example

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.Button>Button</Collapsible.Button>
    <StyledContent>Content 1</StyledContent>
  </Collapsible.Root>
);

// 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.Button>Button</Collapsible.Button>
    <StyledContent>Content 1</StyledContent>
  </Collapsible.Root>
);

API Reference

Root

Contains all the parts of a collapsible.

Prop	Type	Default
`as`	`enum`	`div`
`defaultOpen`	`boolean`
`open`	`boolean`
`onOpenChange`	`function`
`disabled`	`boolean`

Button

The button that toggles the collapsible.

Prop	Type	Default	Required
`as`	`enum`	`button`

Content

The component that contains the collapsible content.

Prop	Type	Default	Required
`as`	`enum`	`div`
`forceMount`	`boolean`

Accessibility

Adheres to the Disclosure WAI-ARIA design pattern.

Keyboard Interactions

Key	Description
`Space`	Opens/closes the collapsible.
`Enter`	Opens/closes the collapsible.