Disclosure
Importing
Add rh-disclosure to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-disclosure/rh-disclosure.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Lightdom CSS shim
Warning
Lightdom CSS shims are an optional, temporary solution for reducing CLS. Learn more about lightdom CSS shims .
<link rel="stylesheet" href="/path/to/rh-disclosure/rh-disclosure-lightdom-shim.css">Note
Replace /path/to/ with path to the CSS file, whether local or CDN.
Usage
<rh-disclosure summary="Collapsed panel title">
<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Velit distinctio, nesciunt nobis sit, a dolor, non numquam rerum recusandae, deserunt enim assumenda quidem. Id impedit necessitatibus obcaecati ratione reprehenderit laborum?</p>
</rh-disclosure>
<script type="module">
import '@rhds/elements/rh-disclosure/rh-disclosure.js';
</script>rh-disclosure
A disclosure allows users to toggle supplementary content via a
trigger. Authors should provide a title through the summary
attribute or slot. It renders a native <details>/<summary>
pair; screen readers announce state changes. Enter or Space
toggles the panel, Tab moves focus in, and Escape closes it.
Avoid nesting; use rh-accordion instead.
Slots
| Slot Name | Summary | Description |
|---|---|---|
summary
|
The clickable title text for the disclosure. |
Accepts inline text or a heading element (e.g.
|
[default]
|
Content revealed when the disclosure is open. |
Accepts block-level elements such as paragraphs, lists,
or nested components. Interactive children receive
focus via Tab when the panel is expanded. Slotted
content should follow WCAG reading order so screen
readers present it logically. Authors should ensure
that interactive elements inside the panel have
visible focus indicators and accessible labels so
keyboard and assistive-technology users can operate
them. The escape key returns focus to the summary
trigger unless the focused element is an input,
select, textarea, or media control, in which case
Escape is passed through to that element. |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
color-palette
|
colorPalette |
Set the colorPalette of the disclosure. Overrides parent context. Possible values are:
|
|
|
open
|
open |
Sets the disclosure to be in its open (expanded) state |
|
|
variant
|
variant |
Borderless: Removes the outer and left border from the disclosure.
The background is |
|
|
summary
|
summary |
Sets the disclosure title via an attribute |
|
|
Methods
None
Events
| Event Name | Description |
|---|---|
toggle
|
Fires when the disclosure
opens or closes. The event has no |
CSS Shadow Parts
None
CSS Custom Properties
None
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-border-width-sm
|
Disclosure container border width 1px border width; Example: Secondary CTA or Button |
|
--rh-color-border-subtle
|
Disclosure container border color |
|
--rh-border-width-md
|
Focus outline width 2px border width: Example: Alert |
|
--rh-font-family-body-text
|
Disclosure body font family Slotted summary font family Body text font family |
|
--rh-font-weight-body-text-medium
|
Trigger text weight Slotted summary text weight Medium font weight |
|
--rh-color-surface
|
Trigger surface color Panel surface color |
|
--rh-color-text-primary
|
Trigger text color Panel text color |
|
--rh-font-size-body-text-md
|
Trigger text size Slotted summary text size Panel text size 16px font size |
|
--rh-line-height-body-text
|
Panel text line height Line height for body text |
|
--rh-space-xl
|
Trigger inline padding Panel block-end padding Panel inline padding 24px spacer |
|
--rh-box-shadow-sm
|
Open disclosure elevation Small box shadow |
|
--rh-color-brand-red
|
Brand accent stripe color |
|
--rh-font-size-body-text-sm
|
Compact trigger text size 14px font size |
|
--rh-space-md
|
Caret trailing margin Compact trigger block padding 8px spacer |
|
--rh-space-lg
|
Trigger block padding Caret icon inline size Caret icon block size Panel block-start padding Compact trigger inline padding Compact panel inline padding 16px spacer |
|
--rh-color-surface-lighter
|
Trigger hover surface in light mode Borderless hover surface in light mode Tertiary surface (light theme) |
|
--rh-color-surface-darker
|
Borderless hover surface in dark mode Secondary surface (dark theme) |
|
--rh-color-interactive-primary-default
|
Focus outline color Borderless trigger text color |
|
--rh-color-interactive-primary-hover
|
Borderless trigger hover text color |
|
--rh-length-3xs
|
Borderless focus outline offset 2px length token |
|
--rh-border-radius-default
|
Disclosure container corner radius Trigger corner radius Panel corner radius Accent stripe start corner radius Accent stripe end corner radius Borderless open panel corner radius 3px border radius; Example: Card |
|
--rh-color-surface-light
|
Borderless open hover surface in light mode Secondary surface (light theme) |
|
--rh-color-surface-dark
|
Trigger hover surface in dark mode Borderless open hover surface in dark mode Tertiary surface (dark theme) |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
