---
title: Select
description: >-
  Use this when you want to give users a predefined list of options to choose
  from.
api_version: 2025-04
api_name: admin-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/admin-extensions/2025-04/components/forms/select
  md: >-
    https://shopify.dev/docs/api/admin-extensions/2025-04/components/forms/select.md
---

# Select

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

## SelectProps

* label

  string

  required

  Content to use as the field label.

* options

  (OptionDescription | OptionGroupDescription)\[]

  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.

* disabled

  boolean

  Whether the select can be changed.

* error

  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.

* 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

  Callback when focus is removed.

* onChange

  (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](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

  Callback when input is focused.

* placeholder

  string

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

* readOnly

  boolean

  Whether the field is read-only.

* 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` 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".

### OptionDescription

* disabled

  Whether this option can be selected or not.

  ```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
  ```

```ts
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.

  ```ts
  boolean
  ```

* label

  The user-facing label for this group of options.

  ```ts
  string
  ```

* options

  The options a user can select from.

  ```ts
  OptionDescription[]
  ```

```ts
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[];
}
```

Examples

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2025-04/select-default.png)

### Examples

* #### Simple Select example

  ##### React

  ```tsx
  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

  ```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);
    },
  );
  ```