Select

Use a select input when a user needs to select one option from a long list
  • Alpha
  • Reviewed for accessibility

Examples

Basic

With grouped options

OptGroup labels are not accessible to all screen readers, so they cannot convey critical information just information that improves usability.

With a placeholder

Select placeholders cannot be used in place of labels and should be used sparingly. They also should not convey critical information.

Props

Select

NameTypeDefaultDescription
block
boolean
false

Creates a full width input element

contrast
boolean
false

Changes background color to a higher contrast color

placeholder
string

Placeholder text to show when no option is selected. <br /> This option is hidden from the dropdown menu when the 'required' prop is set

size
'small' | 'medium' | 'large'

Creates a smaller or larger input than the default.

validationStatus
'error' | 'success' | 'warning'

Style the input to match the status

Status

Alpha

  • Component props and basic example usage of the component are documented on primer.style/react.
  • Component does not have any unnecessary third-party dependencies.
  • Component can adapt to different themes.
  • Component can adapt to different screen sizes.
  • Component has robust unit test coverage (100% where achievable).
  • Component has visual regression coverage of its default and interactive states.
  • Component does not introduce any axe violations.
  • Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.

Beta

  • Component is used in a production application.
  • Common usage examples are documented on primer.style/react.
  • Common usage examples are documented in storybook stories.
  • Component has been reviewed by a systems designer and any resulting issues have been addressed.
  • Component does not introduce any performance regressions.

Stable

  • Component API has been stable with no breaking changes for at least one month.
  • Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
  • Component has corresponding design guidelines documented in the interface guidelines.
  • Component has corresponding Figma component in the Primer Web library.
  • Tooling (such as linters, codemods, etc.) exists to prevent further use of alternatives.