Skip to main content

Select

Selects let buyers choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface.

string
required

Content to use as the field label.

[]
required

The options a buyer can select from.

| boolean

A hint as to the intended content of the field.

When set to true, this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.

When set to false, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes. Note that it is impossible to prevent autocomplete in some browsers, so do not depend on its absence.

Alternatively, you can provide an Autocomplete object, which describes the specific data you would like to be entered into this field during autocomplete.

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 when no value is set.

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

Basic Select

import {
reactExtension,
Select,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
return (
<Select
label="Country"
value="2"
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

  • Use this component when customers need to choose between four or more predefined options.

  • Have a default option selected whenever possible. Use Select as placeholder text if there’s no logical default option.

Was this section helpful?

Anchor to example-using-the-select-component-to-display-a-long-list-of-time-choicesUsing the Select component to display a long list of time choices

The Select component is a great choice for displaying a long list of time choices, as it helps conserve valuable space. If the number of options is less than or equal to 5, we recommend using the ChoiceList component. This allows buyers to see all options immediately without the need for clicking into the select.

Was this section helpful?

Using the Select component to display a long list of time choices

import {
reactExtension,
Select,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
return (
<Select
label="Pickup time"
value="1"
options={[
{
value: '1',
label: '9:00 AM',
},
{
value: '2',
label: '9:30 AM',
},
{
value: '3',
label: '10:00 AM',
},
{
value: '4',
label: '10:30 AM',
},
{
value: '5',
label: '11:00 AM',
},
{
value: '6',
label: '11:30 AM',
},
]}
/>
);
}

Preview