Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Accordion

OverviewStyleGuidelinesCodeAccessibilityDemos
OverviewStatusWhen to useStatus checklistOverviewStatusWhen to useStatus checklist

Overview

Organizes content into expandable panels for scanning and selective disclosure. Must contain paired rh-accordion-header and rh-accordion-panel children. Should have two or more pairs; for a single section use rh-disclosure. Headers use ARIA role="heading" with aria-expanded/aria-controls for screen readers. Supports keyboard navigation: Tab to move focus, Enter or Space to toggle.

import '@rhds/elements/rh-accordion/rh-accordion.js';
 
<rh-accordion>
  <!-- H2 tags will be removed on upgrade, rh-accordion-header will set the correct heading level internally using the header tag that wraps it -->
  <h2><rh-accordion-header>Item One</rh-accordion-header></h2>
  <rh-accordion-panel>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </rh-accordion-panel>
  <h2><rh-accordion-header>Item Two</rh-accordion-header></h2>
  <rh-accordion-panel>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </rh-accordion-panel>
  <h2><rh-accordion-header>Item Three</rh-accordion-header></h2>
  <rh-accordion-panel>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </rh-accordion-panel>
</rh-accordion>
 
import { Accordion } from "@rhds/elements/react/rh-accordion/rh-accordion.js";
import { AccordionHeader } from "@rhds/elements/react/rh-accordion-header/rh-accordion-header.js";
import { AccordionPanel } from "@rhds/elements/react/rh-accordion-panel/rh-accordion-panel.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Accordion>
    <h2>
      <AccordionHeader>Item One</AccordionHeader>
    </h2>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
    <h2>
      <AccordionHeader>Item Two</AccordionHeader>
    </h2>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
    <h2>
      <AccordionHeader>Item Three</AccordionHeader>
    </h2>
    <AccordionPanel>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </AccordionPanel>
  </Accordion>
);

Position of accent slot content relative to the header title. Defaults to inline. Use bottom when accents are numerous or the title needs more horizontal space.

Switches the accordion to large size, increasing font size and padding. Avoid on viewports below 576px; the accordion automatically falls back to small size on mobile breakpoints. Use large for page-level content sections where the accordion is the primary content structure.

Color palette for the accordion and its child headers and panels. Must match the surrounding surface color to ensure adequate text contrast. Avoid mixing light and dark palettes within the same page section.

Comma-separated 0-based indexes of initially expanded panels. Defaults to none (all collapsed). Example: expanded-index="0,2" expands the first and third panels.

 View source on GitHub

Status

When to use

  • When space is at a premium and content cannot be displayed all at once
  • When you need to condense a large amount of related information into sections
  • When you need a way for users to read or compare sections of content simultaneously

Status checklist

Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify