Select

Select allows merchants to choose one option from a dropdown menu.

Consider Select when you have 4 or more options, to avoid creating clutter and make your component more scalable.

Props

optional = ?

Name Type Description
error? string Display an error state
label string Label for the select.
labelInline? boolean Show the label to the left of the value, inside the control.
options Option[] Array of Options to select from.
onChange? (value: string) => void Callback when selected Option changes.
onBlur? () => void Callback when focus is removed
value? string The value of the currently selected Option.

Option

Name Type Description
label string Rendered
value string Non-rendered

Guidelines

✅ Do 🛑 Don't
Use Select when you have 4 or more options Have only a single item

For more guidelines, refer to Polaris' Select best practices.

On this page