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
StyleColor schemeConfigurationInteraction statesStyleColor schemeConfigurationInteraction states

Style

A select is composed of a toggle, which opens a container with options. Options allow the addition of icons, descriptions, and organizational elements like group headings and separators.

Anatomy

An expanded select element with its toggle appearing above a dropdown that contains a placeholder option and selectable options organized into two option groups.
  1. Toggle
  2. Placeholder option
  3. Option
  4. Option group

Color scheme

Select is available in both light and dark schemes.

Light scheme

A collapsed select with 'Select a platform' as the placeholder text, next to the same select expanded in light scheme

Select - collapsed and expanded

In light scheme: Success select has green border and green checkmark icon. Warning select has bright yellow border and bright yellow warning icon. Danger select has dark red orange border with dark red orange icon.

Select elements with status

Dark scheme

A collapsed select with 'Select a platform' as the placeholder text, next to the same select expanded in dark scheme

Select - collapsed and expanded

In dark scheme: Success select has green border and green checkmark icon. Warning select has bright yellow border and bright yellow warning icon. Danger select has red orange border with red orange icon.

Select elements with status

Configuration

Optional additions

Options can include a decorative icon and a description. The icon of a selected option should persist in the toggle, but the description should not.

One expanded select has options with descriptions that use a smaller font size. Second expanded select shows options with icons on the left.

Groups

Options can also be grouped together, with non-interactive group headings if necessary.

Expanded select with options for Red Hat OpenShift editions that are grouped into 'Cloud services editions' and 'Red Hat OpenShift Container Platform'

Space

Space values are the same for all viewport sizes.

A select has 16px padding on the left and right and 8px padding on the top and bottom. There's also an 8px gap between the select's text, caret icon and status icon. Each rh-option element has similar vertical and horizontal padding.

Interaction states

The images below show interaction states for both the select toggle and its options when the element is expanded. When the select element is expanded, focus moves to the selected option, and this is reflected in all of the images.

Hover

In light scheme, when the mouse hovers over the collapsed select toggle, the border color turns blue. When the list is expanded, hovering over an option changes its background color to a light gray. In dark scheme, when the mouse hovers over collapsed select toggle, the border color turns light blue. When the list is expanded, hovering over an option changes its background color to a lighter gray.

Focus

When light scheme select toggle is in focus, a solid, blue focus ring appears around entire element. When expanded, the focus ring is around the currently selected option or the placeholder option. When dark scheme select toggle is in focus, a solid, light blue focus ring appears around entire element. When expanded, focus ring is around the currently selected option or the placeholder option.

Active

In active state, the light scheme toggle's border color darkens and its border width increases. An active option receives the focus state style. Just like the light version, in the active state, dark scheme toggle's border color lightens and its border width increases. An active option receives the focus state style.

Disabled

In light scheme, disabled select element changes its text color to have a faded appearance. In dark scheme, disabled select element changes its text color to have a faded appearance.
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify