Select

Users are presented with a collection of options in a condensed space.

Key Points

Selects should either have a present value or use "Please select" as the default option

Use this input type along with other form guidelines

Usage

Selects can be used in a form when it is required to capture data of specific, preset values. These values are shown in a options menu.

An example of a select input


                                                        
                                                        
                                                            <label for="choose-location>Choose location</label>
                                                        
                                                        <p id="helper-text">This can be different to where you went before.</p>
                                                        
                                                        <select aria-describedby="helper-text" id="choose-location>
                                                          <option value="east-midlands>East Midlands>
                                                          ...
                                                          <option value="scotland'>Scotland</option>
                                                        </select>

A code example of a select input.

Behaviour

Selects act like other inputs, the user can click or tab into the input and enter data. A users should be able to use their keyboard to navigate through the list based on the letter, for quicker navigation.

Showing the options

An example of the select input's option

Validation

An example of select input's validation


                                                        
                                                        
                                                            <label for="choose-location>Choose location</label>
                                                        
                                                        <p id="helper-text">This can be different to where you went before.</p>
                                                        <p id="error-msg">Select a location</p>
                                                        
                                                        <select aria-describedby="error-msg" id="choose-location>
                                                          <option value="east-midlands>East Midlands>
                                                          ...
                                                          <option value="scotland'>Scotland</option>
                                                        </select>