# Select
Use this when you want to give users a predefined list of options to choose from.
```tsx
import React from 'react';
import {
render,
Select,
} from '@shopify/ui-extensions-react/admin';
render('Playground', () => );
function App() {
const [value, setValue] = React.useState('2');
return (
);
}
```
```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);
},
);
```
## SelectProps
### SelectProps
### disabled
value: `boolean`
Whether the select can be changed.
### 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.
### 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.
### onBlur
value: `() => void`
Callback when focus is removed.
### 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.
### onFocus
value: `() => void`
Callback when input is focused.
### options
value: `(OptionDescription | OptionGroupDescription)[]`
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.
### placeholder
value: `string`
A short hint that describes the expected value of the field.
### readOnly
value: `boolean`
Whether the field is read-only.
### 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.
### value
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 `