Skip to main content

Select

Use this when you want to give users a predefined list of options to choose from.

string
required

Content to use as the field label.

( | )[]
required

The options a user can select from.

When both options and children Option or OptionGroup are provided, the options will be merged together, with the options property taking precedence.

boolean

Whether the select can be changed.

string

Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.

string

A unique identifier for the field. When no id is set, a globally unique value will be used instead.

string

An identifier for the field that is unique within the nearest containing Form component.

() => void

Callback when focus is removed.

(value: string) => void

A callback that is run whenever the selected option changes. This callback is called with the string value of the selected option. This component is controlled, so you must store this value in state and reflect it back in the value prop of the select.

() => void

Callback when input is focused.

string

A short hint that describes the expected value of the field.

boolean

Whether the field is read-only.

boolean

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 error prop.

string

The active option for the select. This should match to one of the value properties in the options property or one of the <Option>. When not set, the value will default to an empty string, which will show the placeholder text as the "selected value".

Was this section helpful?

Simple Select example

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',
},
]}
/>
);
}

Preview