---
title: "Select — React"
canonical: https://sky-ui.cf.sky.com/components/select/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Select — React

Select components provide different options for users to choose from.

```js
import { Select } from '@sky-uk/ui-core';
```

---

**Note:** For fully composed form element examples see [Field](/components/field).

---

`Select` is a form component that maps closely to the native `select` element and supports all of the same attributes. [(See MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).

The component contains a `Select.Option` sub component. This maps closely to the native `option` element and supports all of the same attributes. [(See MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option).

```tsx
<Select>
    <Select.Option>Option 1</Select.Option>
    <Select.Option>Option 2</Select.Option>
    <Select.Option>Option 3</Select.Option>
</Select>
```

---

## Props

### state

`state` can be `confirmed` or `error`.

```tsx
<Select state="error">
    <Select.Option>Option 1</Select.Option>
    <Select.Option>Option 2</Select.Option>
    <Select.Option>Option 3</Select.Option>
</Select>
```

---

### icon

**Note:** The functionality to display icons inside the component has been deprecated.

---

## Field

You can combine the `Select` component with the [Field](/components/field) component to add information like label and validation message.

---

## Accessibility

Please refer to the [W3C Forms Concepts](https://www.w3.org/WAI/tutorials/forms/) guide when working with forms.

---

## System Modifiers

The `Select` component also accepts props applied using the following system modifiers:

- [flex-child](/core/system/flex-child/)
- [grid-child](/core/system/grid-child/)
- [margin](/core/system/margin/)
- [position](/core/system/position/)
- [width](/core/system/width/)