--- title: Select description: The select component lets customers choose one option from a dropdown menu. api_version: 2025-07 api_name: customer-account-ui-extensions source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/select md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/select.md --- Migrate to Polaris Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension. # Select The select component lets customers choose one option from a dropdown menu. Use select when presenting four or more choices to keep interfaces uncluttered and scannable, or when space is limited. Select components support option grouping, placeholder text, help text, and validation states. For more visual selection layouts with radio buttons or checkboxes, use [ChoiceList](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/choicelist). ### Support Targets (25) ### Supported targets * Customer​Account::Kitchen​Sink * [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-) * [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets) * [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-) * [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-) * [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-) * [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-) * [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-) * [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-) * [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets) * [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets) * [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-) * [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-) * [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-) * [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-) * [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-) * [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-) * [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-) * [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-) * [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-) * [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#profile-page-b2b-targets-) * [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-addresses-render-after-) * [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-payment-render-after-) * [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-staff-render-after-) * customer-account.​profile.​payment.​render-after #### Use cases * **Country selection**: Let customers pick a country from a long dropdown list. * **Placeholder prompts**: Guide customers with default placeholder text before they choose. * **Disabled dropdowns**: Prevent selection when a prerequisite field isn't complete. * **Compact option lists**: Save space compared to radio buttons or choice lists. *** ## Properties Configure the following properties on the Select component. * **label** **string** **required** The text displayed as the field label, which identifies the purpose of the field to users. * **options** **SelectOptionProps\[]** **required** The options a user can select from. * **autocomplete** **Autocomplete | 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. * **disabled** **boolean** Whether the select is disabled, preventing any user interaction. * **error** **string** An error message displayed below the field to indicate validation problems. When set, the field is styled with error indicators. * **id** **string** A unique identifier for the field. When no `id` is set, a globally unique value will be used instead. * **name** **string** An identifier for the field that is unique within the nearest containing `Form` component. * **onBlur** **() => void** A callback fired when the select loses focus. * **onChange** **(value: string) => void** A callback fired when the select value changes. This callback is called with the string `value` of the selected `option`. This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components), so you must store this value in state and reflect it back in the `value` prop of the select. * **onFocus** **() => void** A callback fired when the select receives focus. * **placeholder** **string** The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value. * **readonly** **boolean** Whether the select is read-only and can't be edited. Read-only selects remain focusable and their content is announced by screen readers. * **required** **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. * **value** **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". ### Autocomplete 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. Learn more about \[autofill detail tokens]\(https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens). * field The type of data that should be inserted into a field supporting autocomplete. ```ts AutocompleteField ``` * group The contact information “group” the autocomplete data should be sourced from. ```ts AutocompleteGroup ``` ### AutocompleteField ```ts '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' ``` ### AutocompleteGroup ```ts 'shipping' | 'billing' ``` ### SelectOptionProps * disabled Whether the option is disabled, preventing selection. ```ts boolean ``` * label The user-facing label for this option. ```ts string ``` * value The value that will be passed to the select’s \`onChange\` callback when this option is selected. ```ts string ``` *** ## Examples ### Select a country Use select to let customers pick one option from a dropdown menu. This example shows a country selection dropdown. ## Select a country ![A select dropdown with a list of country options](https://shopify.dev/assets/assets/images/api/checkout-extensions/post-purchase/components/select-DGNzdeIb.png) ## Select a country ##### React ```tsx import { reactExtension, Select, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { return ( ); } ``` ##### JS ```js import {extension, Select} from '@shopify/ui-extensions/customer-account'; export default extension('customer-account.page.render', (root) => { const select = root.createComponent(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', }, ], }); root.appendChild(select); }); ``` *** ## Best practices * **Use for four or more options**: For fewer choices, use [ChoiceList](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/choicelist) with radio buttons for better visibility. * **Add placeholder text**: Set `placeholder` to guide customers when no option is selected, such as "Choose a country." * **Pre-select common choices**: Use `defaultSelected` on the most common option to reduce the number of interactions for most customers. *** ## Limitations * No multi-select support. * No built-in search or filter. ***