---
title: Select
description: Select allows merchants to choose one option from a dropdown menu.
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/select
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/select.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/select.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/select.md#guidelines)

# Select

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/purchase-options-extensions).

Select allows merchants to choose one option from a dropdown menu.

Consider Select when you have 4 or more options, to avoid creating clutter and make your component more scalable.

##### JavaScript

```ts
import {extend, Select} from '@shopify/admin-ui-extensions';

const options = [
  {
    label: 'Cool option',
    value: 'cool-option',
  },
  {
    label: 'Cooler option',
    value: 'cooler-option',
  },
  {
    label: 'Coolest option',
    value: 'coolest-option',
  },
];

extend('Playground', (root) => {
  const select = root.createComponent(Select, {
    label: 'Select an option',
    options,
    labelInline: true,
    onChange: (value) => console.log(value, 'was selected'),
    value: 'cooler-option',
  });

  root.appendChild(select);

  root.mount();
});
```

##### React

```tsx
import React from 'react';
import {extend, render, Select} from '@shopify/admin-ui-extensions-react';

const options = [
  {
    label: 'Cool option',
    value: 'cool-option',
  },
  {
    label: 'Cooler option',
    value: 'cooler-option',
  },
  {
    label: 'Coolest option',
    value: 'coolest-option',
  },
];

function App() {
  return (
    <Select
      label="Select an option"
      options={options}
      labelInline
      onChange={(value) => console.log(value, 'was selected')}
      value="cooler-option"
    />
  );
}

extend(
  'Playground',
  render(() => <App />),
);
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| error? | `string` | Display an error state |
| label | `string` | Label for the select. |
| labelInline? | `boolean` | Show the label to the left of the value, inside the control. |
| options | `Option[]` | Array of Options to select from. |
| onChange? | `(value: string) => void` | Callback when selected Option changes. |
| onBlur? | `() => void` | Callback when focus is removed |
| value? | `string` | The value of the currently selected Option. |

### Option

| Name | Type | Description |
| - | - | - |
| label | `string` | Rendered |
| value | `string` | Non-rendered |

***

## Guidelines

| ✅ Do | 🛑 Don't |
| - | - |
| Use Select when you have 4 or more options | Have only a single item |

For more guidelines, refer to Polaris' [Select best practices](https://polaris.shopify.com/components/selection-and-input/select#best-practices).

***

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/select.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/select.md#guidelines)