The select menu component is a way of users choosing from a long list of single, or multiple choices.

Where possible, you should try asking users questions before hand so that this list is shorter, or you do not need the use of a select menu.

Example

                                
                                <div class="form__control">
<label for="select-menu">Select an address</label>
<select name="select-menu">
<option value="test1">This is a value</option>
<option value="test2">This is a value</option>
<option value="test3">This is a value</option>
</select>
</div>                                 
                                

When to use this

You should use this component when you are unable to determine a more coherent list of available options through the means of previous questions.

When not to use this

You should not use this component instead of radio or checkboxes when they are more appropriate.

Back to top