Select - React

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

Select is a form component that maps closely to the native select element and supports all of the same attributes. (See MDN).

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

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

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

icon

Field

You can combine the Select component with the Field component to add information like label and validation message.

Accessibility

Please refer to the W3C Forms Concepts guide when working with forms.

System Modifiers

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

• flex-child
• grid-child
• margin
• position
• width