Select

Select lets merchants choose one option from a list in a dropdown menu. It works well for lists of more than four choices when displaying them could clutter up the interface.

Examples

Use when a merchant needs to choose one option from a list of four or more.

Drag to resize example

Props

disabled
boolean
Disable input
error
string | ReactElement | string | ReactElement[]
Display an error state
groups
string | {disabled?: boolean, label: string, value: string} | Group[]
List of option groups to choose from
helpText
React.ReactNode
Additional text to aide in use
id
string
ID for form input
labelRequired
string
Label for the select
labelAction
Action
Adds an action to the label
labelHidden
boolean
Visually hide the label
name
string
Name for form input
options
string | {disabled?: boolean, label: string, value: string}[]
List of options to choose from
placeholder
string
Example text to display as placeholder
value
string
Value for form input
onBlur
() => void
Callback when focus is removed
onChange
(selected: string, id: string) => void
Callback when selection is changed
onFocus
() => void
Callback when select is focussed

Best Practices

The select component should:

  • Be used for lists of four or more items
  • List items within the menu alphabetically or some other logical order so merchants can easily find the selection they need
  • Provide a label to clearly identify the content being presented in the drop down menu
  • Have a default option selected, where possible
  • Have a placeholder option with the text “Select” if there is no logical default option

Content guidelines

Field label

A label is a short description of the requested input. Labels are not help text, and they don’t provide instruction, but they should be meaningful and clearly indicate what is expected. Labels should be:

  • Placed above or beside the form field
  • Short and succinct (1–3 words)
  • Written in sentence case (the first word capitalized, the rest lowercase)

  • Email address

  • What is your email address?

  • Phone number

  • My phone number is:

Menu options

The list of options in a menu should:

  • Be concise but still give the merchant enough information so they can easily make a selection
  • Be arranged alphabetically or in some other clear logical order

Placeholder option

The placeholder option should be the text “Select”.