Component

Collapsible

A simple show/hide component with a trigger and content area. Useful for secondary information that doesn't need to be always visible.

View component changelog

preview

React
"use client"

import Collapsible from "@radui/ui/Collapsible"

const CollapsibleExample = () => {
    return (
        <div className="flex flex-col gap-4 w-[320px]">
            <Collapsible.Root>
                <Collapsible.Trigger className="w-full flex justify-between items-center px-4 py-2 rounded-lg border font-medium cursor-pointer">
                    What is Rad UI?
                    <span>▾</span>
                </Collapsible.Trigger>
                <Collapsible.Content className="px-4 py-2 text-gray-950">
                    Rad UI is a headless component library for React. Build your own design system on top of accessible, unstyled primitives.
                </Collapsible.Content>
            </Collapsible.Root>
            <Collapsible.Root>
                <Collapsible.Trigger className="w-full flex justify-between items-center px-4 py-2 rounded-lg border font-medium cursor-pointer">
                    Is it accessible?
                    <span>▾</span>
                </Collapsible.Trigger>
                <Collapsible.Content className="px-4 py-2 text-gray-950">
                    Yes. All components follow WAI-ARIA patterns and support full keyboard navigation.
                </Collapsible.Content>
            </Collapsible.Root>
        </div>
    )
}

export default CollapsibleExample

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import Collapsible from "@radui/ui/Collapsible"

export default () => {
    return (
        <Collapsible.Root>
            <Collapsible.Trigger />
            <Collapsible.Content />
        </Collapsible.Root>
    )
}

Root

The root collapsible container.

Prop	Type	Default
open	boolean	false
defaultOpen	boolean	false
disabled	boolean	false
transitionDuration	number	0
onOpenChange	function	--
customRootClass	string	""

Trigger

The button that toggles the collapsible open/closed.

Prop	Type	Default
asChild	boolean	false
className	string	""

Content

The content that is shown or hidden.

Prop	Type	Default
className	string	""

Keyboard Interactions

Shortcut	Description
`Tab`	Moves focus to the Collapsible.Trigger.
`Space`	Toggles the controlled content open or closed.
`Enter`	Toggles the controlled content open or closed.
`Escape`	When the content is open and focus is on the trigger, closes the content.

ARIA References

Reference	What Rad UI follows
Disclosure pattern	Uses a button trigger with aria-expanded and aria-controls to expose the content relationship.