Select Fields allow users to choose from a list of options.

Select Fields allow users to choose from a list of options. They can be used when a large number of familiar or predictable options are available. Select Fields require the user to click to reveal the options available to them, in many cases Radio Fields are a better option.

Native version

Due to specific nature of the select fields in native environment ElementNative got slightly different implementation of the SelectField

                                                        
                                                        
                                                            import { SelectField } from '@ovotech/element-native';
                                                        
                                                        <SelectField
                                                          hint="Hint message"
                                                          label="Select something"
                                                          onSelected={(selectedOption) => console.log('selected!', selectedOption)}
                                                          defaultSelected={{ label: 'Appliances', value: 'Appliances' }}
                                                          options={[
                                                            { label: 'Mobiles', value: 'Mobiles' },
                                                            { label: 'Appliances', value: 'Appliances' },
                                                            { label: 'Cameras', value: 'Cameras' },
                                                            { label: 'Computers', value: 'Computers' },
                                                            { label: 'Vegetables', value: 'Vegetables' },
                                                          ]}
                                                        />;
                                                        
                                                            

When to use

• Do use the select field component to allow the user to select one of a range of short predefined values.

When not to use

• Don't use the select field where each pre-defined value is sentence length or needs hint text. A radio list may be a better format for this type of content.

Availabile platforms

How to use it

Hint Text

Hint text should appear below the label and above the input. Do not use placeholders.

Options

• Always put options in a logical order. Where appropriate, put the most common options at the top.
• Never use Select Fields if you want users to read all of the options.

Errors

Error messages should appear above the input, and below the label and help text. These should be written in a concise, specific, way using plain language and without pleasantries.

Properties

Checking for accessibility

User stories

The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.

• As someone using the component, I want to be able to understand the information required from me.
• As someone with a cognitive disability, I want to be able to understand if any personal information is required, for example whether it's the country I live in, my title, or my payment method.
• As someone with a cognitive disability, I want to be able to understand any errors related to the select field, as well as how to resolve the error.
• As a keyboard-only user, I want to be able to navigate to both the input field using the Tab key and the expanded list of options using the up and down arrow keys. I should then be able to select an option using the Enter or Space keys.
• As a screen reader user, I want the field's label to be announced when navigating to the select input field.
• As a screen reader user, I want the selected option to be announced when I navigate to the select input field.
• As a screen reader user, I want any error messages relating to the select field to be announced when they become present.
• As a voice-control user, I want to be able to navigate to the select input using it's associated label.

Test steps

Use these steps to check that the SelectField component has been implemented correctly:

1. Turn on a screen reader.
2. Navigate to each select field using the Tab key.
3. Verify that the select field has a visible label.
4. Verify that a name is announced and that it includes the visible label.
5. Verify that you can expand the list of options to select from using the Space key and that you can navigate through the list of options using the up and down arrow keys.
6. Verify that you can select an option using the Enter or Space keys.

If any errors appear when the form is validated, complete the following checks:

1. Turn on a screen reader.
2. Verify that when an error message appears after the form has been submitted, that the error is included in the ErrorSummary component.
3. Navigate to the select field using the Tab key.
4. Verify that once the select field receives focus, that there is an announcement to convey that there is an error with this field.

Related components

Related patterns