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.
Theming
This element uses Red Hat design system theming and can be used in themable contexts.
This element is a
color palette
container and supports all color palettes via
the color-palette attribute.
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 Applies a 1px border width to at least 1 side of a container. This shall be the default width for all borders and lines. It should be used to establish baseline thickness or visual separation with a container or thin line. It must not be used for strong directional emphasis like indicating a selected state. Recommended for elements like Button, Card, or Field. Applying to all 4 sides at once is optional. |
|
--rh-color-border-subtle
|
Disclosure container border color |
|
--rh-border-width-md
|
Focus outline width Applies a 2px border width to at least 1 side of a container. It should be used to add emphasis or visual separation beyond a 1px border. Recommended for elements needing extra thickness like Alert or Progress stepper. It must be used to ensure hover, focus, and active states are discernible by more than color alone per WCAG. Applying to all 4 sides at once is optional. |
|
--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 Applies a 3px border radius to at least 1 corner of a container. This shall be the default for all containers needing rounded corners. It should be used to soften a container's visual footprint. Recommended for elements with subtle rounded corners like Button, Card, or Dialog. It must be applied to all 4 corners of a container at once. |
|
--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.
