Select

Status

Component checklist

Key Points

• Select components present users with a collection of options in a condensed space
• Selects should either have a present value or use "Please select" as the default option
• Use this input type along with other form guidelines
• Compound uses the native OS select menu to handle dropdowns — there is no custom styling
• Select components are the same height as buttons and other form inputs, so they can be used inline

Use a select component to allow users to choose a single option from a list of predefined values.

Default Option

Selects should either have a present value or use "Please select" as the default option. This provides clear instructions to users about what action is required.

Avoid using ambiguous default text like "Choose an option" when "Please select" or a specific context (e.g., "Select a location") is clearer.

                                                        
                                                        
                                                            <label for="choose-location>Select a 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>