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.

Anchor to ExampleExample

select
import {extend, Select} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
const select = root.createComponent(Select, {
label: 'Select',
value: '1',
options: [
{
value: '1',
label: 'Option 1',
},
{
value: '2',
label: 'Option 2',
},
{
value: '3',
label: 'Option 3',
},
],
});

root.appendChild(select);
});
import {render, Select} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
return (
<Select
label="Select"
value="1"
options={[
{
value: '1',
label: 'Option 1',
},
{
value: '2',
label: 'Option 2',
},
{
value: '3',
label: 'Option 3',
},
]}
/>
);
}

Anchor to PropsProps

optional = ?

NameTypeDescription
id?stringA unique identifier for the field. When no id is provided, a globally unique value will be used instead.
labelstringContent to use as the field label.
name?stringAn identifier for the field that is unique within the nearest containing <Form /> component.
value?stringThe active option for the select. This should match to one of the value properties in the options prop. When not provided, the value will default to an empty string, which will show the "placeholder" text as the "selected value".
optionsOption[]The options a buyer can select from.
required?booleanWhether 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.
disabled?booleanWhether the select can be changed.
error?stringAn error label to present with the field.
autocomplete?Autocomplete | booleanA 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.
placeholder?stringThe text displayed in the select when no value is provided.
onChange?(value: string) => voidA 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.

Anchor to AutocompleteAutocomplete

A descriptor for selecting the data a field would like to receive during autocomplete. This attribute is modeled off of a limited set of the autocomplete values supported in browsers.

NameTypeDescription
group?"shipping" | "billing"The contact information "group" the autocomplete data should be sourced from.
field"name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "credit-card-name" | "credit-card-given-name" | "credit-card-additional-name" | "credit-card-family-name" | "credit-card-number" | "credit-card-expiry" | "credit-card-expiry-month" | "credit-card-expiry-year" | "credit-card-security-code" | "credit-card-type" | "transaction-currency" | "transaction-amount" | "language" | "birthday" | "birthday-day" | "birthday-month" | "birthday-year" | "sex" | "url" | "photo" | "telephone" | "telephone-country-code" | "telephone-national" | "telephone-area-code" | "telephone-local" | "telephone-local-prefix" | "telephone-local-suffix" | "telephone-extension" | "email" | "instant-message" | "home telephone" | "home telephone-country-code" | "home telephone-national" | "home telephone-area-code" | "home telephone-local" | "home telephone-local-prefix" | "home telephone-local-suffix" | "home telephone-extension" | "home email" | "home instant-message" | "work telephone" | "work telephone-country-code" | "work telephone-national" | "work telephone-area-code" | "work telephone-local" | "work telephone-local-prefix" | "work telephone-local-suffix" | "work telephone-extension" | "work email" | "work instant-message" | "mobile telephone" | "mobile telephone-country-code" | "mobile telephone-national" | "mobile telephone-area-code" | "mobile telephone-local" | "mobile telephone-local-prefix" | "mobile telephone-local-suffix" | "mobile telephone-extension" | "mobile email" | "mobile instant-message" | "fax telephone" | "fax telephone-country-code" | "fax telephone-national" | "fax telephone-area-code" | "fax telephone-local" | "fax telephone-local-prefix" | "fax telephone-local-suffix" | "fax telephone-extension" | "fax email" | "fax instant-message" | "pager telephone" | "pager telephone-country-code" | "pager telephone-national" | "pager telephone-area-code" | "pager telephone-local" | "pager telephone-local-prefix" | "pager telephone-local-suffix" | "pager telephone-extension" | "pager email" | "pager instant-message"The type of data that should be inserted into a field supporting autocomplete.

Anchor to OptionOption

NameTypeDescription
valuestringThe value that will be passed to the select's onChange callback when this option is selected.
labelstringThe buyer-facing label for this option.
disabled?booleanWhether this option can be selected or not.
Was this page helpful?