HomeStarbucks Pattern Library

Select

Notes

A select component that leverages the browser's built in select, layering on a styled label and presentation for the currently selected option.

Props

  • childrennode*

    option elements associated with the select element.

  • classNamestring
  • customFieldStatusbool

    A flag indicating that the field uses a custom element to display field status and should not wrap error messages in a FieldStatus component.

  • displayStatusbool

    A flag indicating that the field should display its error message irrespective of the field's error status. If set to true, the error message will display no matter what. If set to false, it will never display.

  • errorbool

    A flag indicating that the field is in an error state.

  • errorMessagenode

    A message to display when the field is in an error state. Wrapped in a FieldStatus component by default.

  • floatLabelAriaHiddenbool

    Set to true to hide float label text from screen readers

  • idstring
  • useInactiveStylebool

    Set to true to display select as greyed out and recessed

  • labelstring*
  • modifiedbool

    For use cases where a select has a default option pre-selected, use this prop to visually indicate that the user chose something else

  • namestring
  • onChangefunc
  • selectedOptionFormatterfunc

    A function allowing the select component's getSelectedOption to pass a custom text for the selected option. Returns custom text.

  • valuestring

Example: Select

Example: Select that starts out in the inactive state, a state that is similar to disabled, but the Select is still operable. This state can be used to visually convey 'not required'.