Skip to content

Select

Alpha
Use a select input when a user needs to select one option from a long list

Examples

Basic

With grouped options

With a placeholder

Props

Select

NameTypeDefaultDescription
block
boolean
falseCreates a full width input element
contrast
boolean
falseChanges background color to a higher contrast color
size
'small' | 'medium' | 'large'
Creates a smaller or larger input than the default.
validationStatus
'warning' | 'error'
Style the input to match the status
Additional props are passed to the <select> element. See MDN for a list of props accepted by the <select> element.

Select.OptGroup

The Select.OptGroup component accepts the same props as a native HTML <optgroup>.

Select.Option

The Select.Option component accepts the same props as a native HTML <option>.

Status

Alpha

  • Component props 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 100% test coverage.

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 has been manually reviewed by the accessibility team and any resulting issues have been addressed.

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.