Select

Select lets merchants choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface.

Examples

Presents a classic dropdown menu or equivalent picker as determined by merchants’ browsers.

Drag to resize example

Props

disabled
boolean
Disable input
error
string | ReactElement | (string | ReactElement)[] | boolean
Display an error state
helpText
React.ReactNode
Additional text to aide in use
id
string
ID for form input
labelRequired
React.ReactNode
Label for the select
labelAction
Action
Adds an action to the label
labelHidden
boolean
Visually hide the label
labelInline
boolean
Show the label to the left of the value, inside the control
name
string
Name for form input
options
(string | StrictOption | SelectGroup)[]
List of options or option groups to choose from
placeholder
string
Example text to display as placeholder
requiredIndicator
boolean
Visual required indicator, add an asterisk to label
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 focused

Default select

The Android menu is similar in behavior to the web dropdown.

Android select, and select with option menu

Disabled select

Use for selections that aren’t currently available. The surrounding interface should make it clear why the select box is disabled and how to activate it.

Disabled select component on Android

Default select

The iOS picker expands in-line. Merchants scroll to select the item they want.

iOS select, and select with option menu

Disabled select

Use for selections that aren’t currently available. The surrounding interface should make it clear why the select box is disabled and how to activate it.

Disabled select component on iOS

Best practices

The select component should:

  • Be used for selecting between 4 or more pre-defined options
  • Have a default option selected whenever possible
  • Use “Select” as a placeholder option only if there’s no logical default option

Content guidelines

Select label

Labels should:

  • Give a short description (1–3 words) of the requested input.
  • Be written in sentence case (the first word capitalized, the rest lowercase).
  • Avoid punctuation and articles (“the”, “an”, “a”).
  • Be independent sentences. To support internationalization, they should not act as the first part of a sentence that is finished by the component’s options.
  • Be descriptive, not instructional. If the selection needs more explanation, use help text below the field.

  • Email address

  • What is your email address?

  • Phone number

  • My phone number is:

Select options

Options should:

  • Start with “Select” as a placeholder if there isn’t a default option
  • Be listed alphabetically or in another logical order so merchants can easily find the option they need
  • Be written in sentence case (the first word capitalized, the rest lowercase) and avoid using commas or semicolons at the end of each option
  • Be clearly labelled based on what the option will do

Edit source on GitHub