Select
Use this when you want to give users a predefined list of options to choose from.
Anchor to selectpropsSelectProps
- Anchor to labellabellabelstringstringrequiredrequired
Content to use as the field label.
- Anchor to optionsoptionsoptions(OptionDescription | OptionGroupDescription)[](OptionDescription | OptionGroupDescription)[]requiredrequired
The options a user can select from.
When both
optionsand childrenOptionorare provided, the options will be merged together, with theoptionsproperty taking precedence.- Anchor to disableddisableddisabledbooleanboolean
Whether the select can be changed.
- Anchor to errorerrorerrorstringstring
Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.
- Anchor to idididstringstring
A unique identifier for the field. When no
idis set, a globally unique value will be used instead.- Anchor to namenamenamestringstring
An identifier for the field that is unique within the nearest containing
Formcomponent.- Anchor to onBluronBluronBlur() => void() => void
Callback when focus is removed.
- Anchor to onChangeonChangeonChange(value: string) => void(value: string) => void
A callback that is run whenever the selected option changes. This callback is called with the string
valueof the selectedoption. This component is controlled, so you must store this value in state and reflect it back in thevalueprop of the select.- Anchor to onFocusonFocusonFocus() => void() => void
Callback when input is focused.
- Anchor to placeholderplaceholderplaceholderstringstring
A short hint that describes the expected value of the field.
- Anchor to readOnlyreadOnlyreadOnlybooleanboolean
Whether the field is read-only.
- Anchor to requiredrequiredrequiredbooleanboolean
Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the
errorprop.- Anchor to valuevaluevaluestringstring
The active option for the select. This should match to one of the
valueproperties in theoptionsproperty or one of the<Option>. When not set, the value will default to an empty string, which will show theplaceholdertext as the "selected value".
OptionDescription
- disabled
Whether this option can be selected or not.
boolean - label
The user-facing label for this option.
string - value
The value that will be passed to the select’s `onChange` callback when this option is selected.
string
export interface OptionDescription {
/**
* Whether this option can be selected or not.
*/
disabled?: boolean;
/**
* The user-facing label for this option.
*/
label: string;
/**
* The value that will be passed to the select’s `onChange` callback
* when this option is selected.
*/
value: string;
}OptionGroupDescription
- disabled
Whether the options within this group can be selected or not.
boolean - label
The user-facing label for this group of options.
string - options
The options a user can select from.
OptionDescription[]
export interface OptionGroupDescription {
/**
* Whether the options within this group can be selected or not.
*/
disabled?: boolean;
/**
* The user-facing label for this group of options.
*/
label: string;
/**
* The options a user can select from.
*/
options?: OptionDescription[];
}Preview

Examples
Simple Select example
React
import React from 'react'; import { render, Select, } from '@shopify/ui-extensions-react/admin'; render('Playground', () => <App />); function App() { const [value, setValue] = React.useState('2'); return ( <Select label="Country" value={value} onChange={setValue} options={[ { value: '1', label: 'Australia', }, { value: '2', label: 'Canada', }, { value: '3', label: 'France', }, { value: '4', label: 'Japan', }, { value: '5', label: 'Nigeria', }, { value: '6', label: 'United States', }, ]} /> ); }JS
import { extension, Select, } from '@shopify/ui-extensions/admin'; export default extension( 'Playground', (root) => { let value = '2'; const select = root.createComponent(Select, { value, label: 'Country', onChange(nextValue) { value = nextValue; select.updateProps({value}); }, options: [ { value: '1', label: 'Australia', }, { value: '2', label: 'Canada', }, { value: '3', label: 'France', }, { value: '4', label: 'Japan', }, { value: '5', label: 'Nigeria', }, { value: '6', label: 'United States', }, ], }); root.appendChild(select); }, );