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.

Props

No props found for this component, run `yarn gen:docs` to generate component meta first.

Slots

No slots found for this component, run `yarn gen:docs` to generate component meta first.

Events

Select events

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.

Do

• Email address

Don’t

• What is your email address?

Do

• Phone number

Don’t

• 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

---

Related components

• To let merchants select one option from a list with less than 4 options, use the choice list component
• To create a select where merchants can make multiple selections, or to allow advanced formatting of option text, use an option list inside a popover