Disclosure / Collapsible

One collapsible section. Group several in an Accordion. Height animates via --disclosure-panel-height.

Import

import { Disclosure } from '@marbleui/ui'

Props

<Disclosure>

Prop	Type	Default	Description
children *required	`ReactNode`	`—`
title *required	`ReactNode`	`—`
icon	`ReactNode`	`—`
level	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`3`	Heading level of the trigger (default 3). Match it to the surrounding outline.
variant	`'default' \| 'card'`	`'default'`

Also accepts React Aria props (79).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Button · React Aria Disclosure · React Aria DisclosurePanel · React Aria Heading. Follow the primitive's docs for the full keyboard map.

Usage notes

One collapsible section with a heading-wrapped trigger. For several related sections use Accordion; for content shown in a floating panel use Popover.

<Disclosure title="Advanced settings" defaultExpanded>
  Configure webhooks and data retention.
</Disclosure>

Controlled: isExpanded and onExpandedChange; uncontrolled: defaultExpanded. isDisabled is also supported.
The trigger sits inside a heading, h3 by default. Set level to match the page outline.
variant is default or card; icon adds a leading icon, which should be decorative.
Inside an Accordion each Disclosure needs an id.

Example source · show

import { Disclosure } from './disclosure'

export const styles = {
  Default: () => (
    <div className="w-96">
      <Disclosure title="Advanced settings" defaultExpanded>
        Configure webhooks, custom domains and data retention. Changes apply to every project in this workspace.
      </Disclosure>
    </div>
  ),
  Card: () => (
    <div className="w-96">
      <Disclosure variant="card" title="Why was I charged twice?">
        You were charged once for the new plan and refunded for the unused part of the old one. The refund takes 3–5 days.
      </Disclosure>
    </div>
  ),
}

Source: packages/ui/src/disclosure/disclosure.tsx

Catalog

Category: layout
Priority: Foundation
Primitive: react-aria
React Aria: Disclosure
Base UI: Collapsible