Select

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to 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.

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();

});

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 />),

);

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();
});

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 />),
);

Anchor to PropsProps

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.

Anchor to OptionOption

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

Anchor to GuidelinesGuidelines

✅ 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.

Was this page helpful?