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

```tsx
import {
  reactExtension,
  Select,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Select
      label="Country"
      value="2"
      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
import {extension, Select} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const select = root.createComponent(Select, {
    label: 'Country',
    value: '2',
    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);
});

```

## SelectProps

### SelectProps

### id

value: `string`

A unique identifier for the field. When no `id` is set,
a globally unique value will be used instead.

### label

value: `string`

Content to use as the field label.

### name

value: `string`

An identifier for the field that is unique within the nearest
containing `Form` component.

### value

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

### options

value: `SelectOptionProps[]`

The options a buyer can select from.

### required

value: `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.

### disabled

value: `boolean`

Whether the select can be changed.

### readonly

value: `boolean`

Whether the field is read only

### error

value: `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.

### autocomplete

value: `boolean | Autocomplete`

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.

### onChange

value: `(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.

### SelectOptionProps

### value

value: `string`

The value that will be passed to the select’s `onChange` callback
when this option is selected.

### label

value: `string`

The buyer-facing label for this option.

### disabled

value: `boolean`

Whether this option can be selected or not.

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

### group

value: `AutocompleteGroup`

The contact information “group” the autocomplete data should be sourced from.

### field

value: `AutocompleteField`

The type of data that should be inserted into a field supporting autocomplete.

## Examples

Selects let buyers choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface.


The Select component is a great choice for displaying a long list of time choices, as it helps conserve valuable space. If the number of options is less than or equal to 5, we recommend using the [ChoiceList](https://shopify.dev/docs/api/checkout-ui-extensions/components/forms/choicelist) component. This allows buyers to see all options immediately without the need for clicking into the select.

```tsx
import React from 'react';
import {
  reactExtension,
  Select,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <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',
        },
      ]}
    />
  );
}

```

```js
import {extension, Select} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.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);
});

```

## Examples

Selects let buyers choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface.


The Select component is a great choice for displaying a long list of time choices, as it helps conserve valuable space. If the number of options is less than or equal to 5, we recommend using the [ChoiceList](https://shopify.dev/docs/api/checkout-ui-extensions/components/forms/choicelist) component. This allows buyers to see all options immediately without the need for clicking into the select.

```tsx
import React from 'react';
import {
  reactExtension,
  Select,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <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',
        },
      ]}
    />
  );
}

```

```js
import {extension, Select} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.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);
});

```