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 group 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 Readtime Scheme toggle Select 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

Select

OverviewStyleGuidelinesCodeAccessibilityDemos
OverviewStatusWhen to useStatus checklistOverviewStatusWhen to useStatus checklist

Overview

A select element allows users to Select from an expandable list.

import '@rhds/elements/rh-select/rh-select.js';
 
label,
rh-select {
  margin-inline: 20px;
  max-inline-size: 320px;
}

label {
  display: block;
  font-family: var(--rh-font-family-body-text);
  font-weight: var(--rh-font-weight-body-text-medium, 500);
  margin-block: var(--rh-space-md, 8px);
}
 
<label for="my-select">
  Products
</label>
<rh-select id="my-select" placeholder="Select an item">
  <rh-option>Device Edge</rh-option>
  <rh-option>JBoss Web Server</rh-option>
  <rh-option>OpenShift</rh-option>
  <rh-option disabled="">Red Hat Lightspeed</rh-option>
  <rh-option>Quay</rh-option>
</rh-select>

<link rel="stylesheet" href="../rh-select-lightdom-shim.css">
 
import { Option } from "@rhds/elements/react/rh-option/rh-option.js";
import { Select } from "@rhds/elements/react/rh-select/rh-select.js";

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

export const Demo = () => (
  <label htmlFor="my-select">Products</label>
  <Select id="my-select" placeholder="Select an item">
    <Option>Device Edge</Option>
    <Option>JBoss Web Server</Option>
    <Option>OpenShift</Option>
    <Option disabled>Red Hat Lightspeed</Option>
    <Option>Quay</Option>
  </Select>
  <link rel="stylesheet" href="../rh-select-lightdom-shim.css" />
);

Accessible label text for screen readers and assistive technologies. Should be used when the select lacks an associated <label> element. Required for accessibility compliance when no visible label is present.

Whether the select control is disabled and non-interactive. When true, prevents user interaction and excludes the value from form submission.

Whether the dropdown listbox is currently expanded and visible. Automatically managed by keyboard and mouse interactions. Should not be manually set in most cases.

When true, the user must select an option with a non-empty value before the form can be submitted. Syncs to aria-required and constraint validation so the browser can show "Please fill out this field" when the value is empty.

Current form value representing the selected option's value attribute. Updates automatically when selection changes. Use for form submission and programmatic value access.

Form control name. Submitted with the form as the key for this control's value in FormData. Reflects to the name attribute.

Placeholder text displayed when no option is selected. Should provide guidance about expected input. Overridden by the placeholder slot if provided. Used as fallback accessible label when no accessible-label or associated label is present.

Help text displayed below the control. Content slotted into the help-text slot overrides this attribute.

Visual and semantic state of the form control for user feedback. Use 'danger' for blocking errors that prevent form submission, 'warning' for non-blocking issues requiring attention, and 'success' for valid selections. Affects styling.

 View source on GitHub

Status

When to use

  • When users need to select an option that requires persistent visibility
  • When space is limited and a radio button group would take up too much room
  • When a branded appearance or additional context within a select is needed

Status checklist

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