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 undefined CSS
Warning
This optional stylesheet provides styles while the element is not yet defined
(:not(:defined)), which can reduce
CLS.
Learn more about lightdom undefined CSS
.
<link rel="stylesheet" href="/path/to/rh-disclosure/rh-disclosure-lightdom-undefined.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
| CSS Property | Description | Default |
|---|---|---|
--rh-disclosure-summary-outline-color |
Focus outline color. Falls back to the interactive-primary token used for the trigger's resting/hover text, so unthemed consumers get one consistent brand color. Themes that repurpose that token for text only (e.g. the borderless variant's gray-text treatment) can set this separately to keep the focus ring on-brand. |
var(--rh-color-interactive-primary-default)
|
--rh-icon-size |
Caret icon inline size.
Reads the same Caret icon block size |
var(--rh-space-lg, 16px)
|
--rh-disclosure-padding-inline |
Inline padding for the trigger and the panel. Falls back to the 24px spacer. The compact size keeps its own inline padding. Inline padding for the panel. Same property as the trigger, with the same 24px fallback. |
var(--rh-space-xl, 24px)
|
--rh-disclosure-border-width |
Trigger border width. Panel border width. |
0
|
--rh-disclosure-border-color |
Trigger border color. Panel border color. |
transparent
|
--rh-disclosure-summary-background-color-expanded |
Background of the open trigger at rest. Falls back to the trigger surface, so the panel can keep that color while the open summary uses another fill. Hover, focus, and active keep their own fills. The borderless variant keeps its own open fill. |
var(--rh-color-surface)
|
--rh-disclosure-summary-outline-offset |
Offset of the outline on the trigger while focused or active.
Defaults to Borderless focus outline offset. Reuses the same cssprop the default variant uses for its own (inset) offset, so themes can give borderless its own outset value without a second property. |
var(--rh-length-3xs, 2px)
|
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-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
|
Panel block-end padding 24px spacer |
|
--rh-box-shadow-sm
|
Open disclosure elevation Small box shadow |
|
--rh-color-surface
|
Trigger surface color at rest.
Reset on every disclosure so a nested disclosure's closed trigger
doesn't inherit an open ancestor's expanded fill through custom
property inheritance. Panel surface color |
|
--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 Panel block-start padding Compact trigger inline padding Compact panel inline padding 16px spacer |
|
--rh-color-surface-lighter
|
Trigger hover surface for light scheme Borderless hover surface for light scheme Tertiary surface (light theme) |
|
--rh-color-surface-darker
|
Borderless hover surface for dark scheme Secondary surface (dark theme) |
|
--rh-color-interactive-primary-default
|
Borderless trigger text color |
|
--rh-color-interactive-primary-hover
|
Borderless trigger hover text color |
|
--rh-length-3xs
|
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 for light scheme Secondary surface (light theme) |
|
--rh-color-surface-dark
|
Trigger hover surface for dark scheme Borderless open hover surface for dark scheme 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.
