Component

Disclosure

A multi-item show/hide component. Use the convenience wrapper with an items array, or compose manually with Root, Item, Trigger, and Content.

View component changelog

preview

React
"use client"

import Disclosure from "@radui/ui/Disclosure"

const items = [
    { title: "What is Rad UI?", content: "Rad UI is a headless component library for React. Build your own design system on top of accessible, unstyled primitives." },
    { title: "Is it accessible?", content: "Yes. All components follow WAI-ARIA patterns and support full keyboard navigation." },
    { title: "Can I use it with Tailwind?", content: "Absolutely. Since components are headless, you can style them with any CSS approach including Tailwind." }
]

const DisclosureExample = () => {
    return (
        <div className="w-[360px]">
            <Disclosure items={items} />
        </div>
    )
}

export default DisclosureExample

API Documentation

Anatomy

Import all parts of the component and piece them together

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

export default () => {
    return (
        <Disclosure.Root>
            <Disclosure.Item value={0}>
                <Disclosure.Trigger />
                <Disclosure.Content />
            </Disclosure.Item>
        </Disclosure.Root>
    )
}

Root

The root Disclosure container.

Prop	Type	Default
items	{ title: string, content: ReactNode }[]	--
className	string	""
loop	boolean	true

Keyboard Interactions

Shortcut	Description
`Tab`	Moves focus to the active Disclosure.Trigger in the trigger group.
`Space`	Toggles the focused item open or closed.
`Enter`	Toggles the focused item open or closed.
`ArrowRight`	Moves focus to the next trigger. In RTL direction, moves focus to the previous trigger.
`ArrowLeft`	Moves focus to the previous trigger. In RTL direction, moves focus to the next trigger.
`Home`	Moves focus to the first enabled trigger.
`End`	Moves focus to the last enabled trigger.

ARIA References

Reference	What Rad UI follows
Disclosure pattern	Uses disclosure-style button triggers with aria-expanded state and region content for each revealed panel.
Region role	Exposes the root, items, and opened content as regions so composed multi-item disclosures can be labelled by consumers.