Disclosure

Disclosures progressively reveal content behind a trigger, such as FAQs, filter panels, or advanced settings that most users can skip.

Try it

Usage

Use RuiDisclosureTrigger and RuiDisclosurePanel inside RuiDisclosure. Group related disclosures with RuiDisclosureGroup when only one should be open.

import {
  RuiDisclosure,
  RuiDisclosureTrigger,
  RuiDisclosurePanel,
} from '@ecopages/radiant-ui/disclosure';
 
<RuiDisclosure>
  <RuiDisclosureTrigger>Shipping details</RuiDisclosureTrigger>
  <RuiDisclosurePanel>Delivered in 3–5 business days.</RuiDisclosurePanel>
</RuiDisclosure>Copy

RuiDisclosureTrigger renders an indicator arrow defaulting to RuiIconChevronDown. It points downward when collapsed and rotates 180° when expanded.

Set iconPosition="end" to position the arrow at the trailing edge (default is "start"). Pass iconPosition and icon directly to RuiDisclosure when using the trigger prop, or configure them on RuiDisclosureTrigger. Pass icon={<RuiDisclosureIcon variant="plus" />} or icon={null} to customize.

Indicator position

Place the toggle arrow at the start or trailing end using iconPosition="end".

import { RuiDisclosure } from '@ecopages/radiant-ui/disclosure';
 
<RuiDisclosure trigger="Return policy" iconPosition="end">
  Items can be returned within 30 days of delivery.
</RuiDisclosure>Copy

Custom markup

<rui-disclosure> coordinates any light-DOM tree that matches its query contract. The Rui* helpers stamp these targets; they are not required.

import '@ecopages/radiant-ui/disclosure';
 
<rui-disclosure>
  <div class="rui-disclosure">
    <button type="button" data-disclosure-trigger class="rui-disclosure__trigger">
      Shipping details
    </button>
    <div data-disclosure-panel class="rui-disclosure__panel">
      <div class="rui-disclosure__panel-inner">Delivered in 3–5 business days.</div>
    </div>
  </div>
</rui-disclosure>Copy

BEM classes are presentation-only. Do not set aria-expanded, aria-controls, hidden, or data-state — the host owns those.

Accordion groups

Wrap multiple disclosures in RuiDisclosureGroup with multiple=\{false} for accordion behavior.

import '@ecopages/radiant-ui/disclosure';
 
<rui-disclosure-group>
  <rui-disclosure>
    <button type="button" data-disclosure-trigger>Shipping</button>
    <div data-disclosure-panel hidden>Delivered in 3–5 days.</div>
  </rui-disclosure>
</rui-disclosure-group>Copy

Animated panels

Enable animated for height transitions. Verify content remains readable during the animation.

Theming

Disclosure surfaces map to semantic surface roles, never Tailwind palette steps:

Override roles at the theme layer, not in component CSS.

API

Disclosure provides two custom elements: <rui-disclosure> (show/hide) and <rui-disclosure-group> (accordion). Compose the view helpers to render triggers and panels, or mark up data-disclosure-trigger / data-disclosure-panel elements directly.

Attributes (<rui-disclosure>)

Light-DOM contract (<rui-disclosure>)

Do not set aria-expanded, aria-controls, hidden, or data-state. Nested hosts: none.

Attributes (<rui-disclosure-group>)

Light-DOM contract (<rui-disclosure-group>)

Nested host: rui-disclosure — owns [data-disclosure-trigger] and [data-disclosure-panel].

Events

View helpers

CSS classes

Public BEM classes on the composed light-DOM surface (documented via @cssclass):

Theme roles

Accessibility

• Triggers expose aria-expanded reflecting panel visibility.
• Panel content is associated with its trigger via aria-controls.
• Keyboard users activate disclosures with Enter or Space on the trigger.