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 dropdown Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed How to useProject FeltColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile AI design principlesLegal requirementsTransparency noticesIconographyColorChatbot avatarsAnimation All Personalization PatternsAnnouncement FundamentalsColorAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Scheme dropdown Since v4.2.0

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleOrientationsColor schemeSpaceInteraction statesStyleOrientationsColor schemeSpaceInteraction states

Style

A scheme dropdown is a menu dropdown with icons and text that represent selectable color schemes. A blue check is displayed next to whatever color scheme is currently selected.

Anatomy

1: Scheme dropdown trigger. 2: Light option. 3: Dark option.
  1. Menu dropdown
  2. Selected color scheme
  3. Other color scheme options

Orientations

An expanded scheme dropdown can be anchored on the left or right of the menu dropdown.

Two scheme dropdowns showing how the dropdown menu can align to the left or right of the trigger. One additional closed scheme dropdown to illustrate the closed state.

Color scheme

A scheme dropdown is available in both light and dark color schemes.

Light Scheme

Two light scheme dropdowns. One shows the expanded dropdown. A light scheme dropdown has a white background color and near-black text. The focus rings are blue. The selected option uses the 'check' rh-icon from the UI set.

Dark scheme

Two light scheme dropdowns. One shows the expanded dropdown. A dark scheme dropdown has a black background color and near-white text. The focus rings are light blue. The selected option uses the 'check' rh-icon from the UI set.

Space

Scheme dropdown spacing values: the trigger has 16px left and right padding, 6px top and bottom padding, and 8px between the icon and caret. A 4px gap separates the trigger from the expanded panel. The panel has 8px top and bottom padding, 16px inline padding for each item row, 6px block padding within each row, and 0px gap between rows.

Interaction states

To see live interaction states, go to the Demos page.

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