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.
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. |
| Name | Type | Description |
|---|---|---|
| label | string |
Rendered |
| value | string |
Non-rendered |
| ✅ 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.