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
Keyboard interactionsFocus orderTouch targetsValidation and error stateAdditional guidelinesARIA Authoring Practices Guide (APG)Web Content Accessibility GuidelinesKeyboard interactionsFocus orderTouch targetsValidation and error stateAdditional guidelinesARIA Authoring Practices Guide (APG)Web Content Accessibility Guidelines

Keyboard interactions

The select toggle and its options can be interacted with using the tab, arrow, space, and enter keys.

Diagram showing the keyboard interactions for an expanded select
Key Result
Tab
  • Moves focus to the select
  • Collapses an expanded select when focus leaves it
Enter/Space
  • Expands select
  • Selects an option and collapses the list
Down Moves focus to the next interactive option
Up Moves focus to the previous interactive option

Focus order

A logical focus order helps keyboard users operate our websites. Elements need to receive focus in an order that preserves meaning, therefore the focus order should make sense and not jump around randomly.

Diagram showing the focus order for an expanded select starting at the top toggle and progressively moving downwards through each non-disabled option.

Touch targets

All toggles and menu items exceed the WCAG Level AA success criteria for target size, which calls for touch targets to be at least 24px by 24px.

Diagram showing the touch target size in relation to a select toggle and interactive options

Validation and error state

The component does not set aria-invalid when you set state="danger". The state attribute (danger, warning, success) is for visual feedback only. To expose an invalid state to assistive technologies, implementors must set aria-invalid on the select themselves (and optionally use the Constraint Validation API).

This keeps a single source of truth for "invalid" in your code and avoids the component asserting "invalid" when you only meant visual emphasis. When you do have a validation error, set both the visual state and ARIA so screen reader users get the same information.

For how to combine state, aria-invalid, and the Constraint Validation API (including built-in required validation and custom validation), see Validation and error state on the Code page.

Additional guidelines

  • If a select does not have an associated
  • Each option requires a label attribute.

ARIA Authoring Practices Guide (APG)

Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences.

View APG resources

Web Content Accessibility Guidelines

Automated testing

Some of our elements may receive errors or warnings that are false positives from automated testing tools. If you are experiencing some of these issues, please read our update on false positives in automated tools.

Understanding documents provide detailed explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria.

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