These should never be used for short lists of items that could be better served by using radio options.
Use with caution
GDS advise against using dropdown select boxes as they have poor accessibility and can be cumbersome to use on a mobile device.
They hide the choices and can confuse users as they may not understand what they’re being asked before they see the answers by interacting with the element.
Where large lists are involved, some users may be unaware that they can scroll through the entire list to find the appropriate answer.
Because the expanded list cannot be styled, this may cause usability issues where the dropdown itself may be difficult to read for users with visual impairments.
There are two key variants of the select element; mandatory and optional.
The initial option should always be ‘Select an option’. This is set by applying the selected attribute to this option.
By adding the disabled attribute to the ‘Select an option’ option the select element is made mandatory as it is not possible to select an option with no value.
Without the disabled attribute on ‘Select an option’ users are able to select an option without a value.
By applying the .input--block class to the select element a variant which uses 100% of the available width can be implemented.
Global
/components/02-form-elements/input/_input.scss/components/02-form-elements/input-type/_input-type.scss
<!-- Select -->
<div class="field field--select">
<label class="label venus " for="select">
Select your favourite cartoon character
<br/>
<span class="label__description pluto">As the initial option is selected and disabled this is a mandatory field (once a selection has been made it is not possible to select no option.)</span>
</label>
<select class="input input--select" id="select" name="select">
<option selected disabled>Select an option</option>
<option value="bart">Bart Simpson</option>
<option value="homer">Homer Simpson</option>
<option value="marge">Marge Simpson</option>
<option value="lisa">Lisa Simpson</option>
<option value="ned">Ned Flanders</option>
<option value="bugs">Bugs Bunny</option>
<option value="7 Dwarves">The 7 Dwarves: Grumpy, Happy, Sleepy, Bashful, Sneezy, Dopey, Doc</option>
<option value="charlie brown">Charlie Brown</option>
<option value="snoopy">Snoopy</option>
</select>
</div>
<!-- Select (optional) -->
<div class="field field--select">
<label class="label venus " for="select-opt">
Select your favourite cartoon character
<br/>
<span class="label__description pluto">As the initial option is selected but not disabled this is an optional field (once a selection has been made it is possible to select no option.)</span>
</label>
<select class="input input--select" id="select-opt" name="select">
<option selected>Select an option</option>
<option value="bart">Bart Simpson</option>
<option value="homer">Homer Simpson</option>
<option value="marge">Marge Simpson</option>
<option value="lisa">Lisa Simpson</option>
<option value="ned">Ned Flanders</option>
<option value="bugs">Bugs Bunny</option>
<option value="7 Dwarves">The 7 Dwarves: Grumpy, Happy, Sleepy, Bashful, Sneezy, Dopey, Doc</option>
<option value="charlie brown">Charlie Brown</option>
<option value="snoopy">Snoopy</option>
</select>
</div>
<!-- Select (wide) -->
<div class="field field--select">
<label class="label venus " for="select-wide">
Select your favourite cartoon character
</label>
<select class="input input--select input--block" id="select-wide" name="select">
<option selected disabled>Select an option</option>
<option value="bart">Bart Simpson</option>
<option value="homer">Homer Simpson</option>
<option value="marge">Marge Simpson</option>
<option value="lisa">Lisa Simpson</option>
<option value="ned">Ned Flanders</option>
<option value="bugs">Bugs Bunny</option>
<option value="7 Dwarves">The 7 Dwarves: Grumpy, Happy, Sleepy, Bashful, Sneezy, Dopey & Doc</option>
<option value="charlie brown">Charlie Brown</option>
<option value="snoopy">Snoopy</option>
</select>
</div>
<!-- Select (wide, optional) -->
<div class="field field--select">
<label class="label venus " for="select-wide-optional">
Select your favourite cartoon character
<br/>
<span class="label__description pluto">As the initial option is selected but not disabled this is an optional field (once a selection has been made it is possible to select no option.)</span>
</label>
<select class="input input--select input--block" id="select-wide-optional" name="select">
<option selected>Select an option</option>
<option value="bart">Bart Simpson</option>
<option value="homer">Homer Simpson</option>
<option value="marge">Marge Simpson</option>
<option value="lisa">Lisa Simpson</option>
<option value="ned">Ned Flanders</option>
<option value="bugs">Bugs Bunny</option>
<option value="7 Dwarves">The 7 Dwarves: Grumpy, Happy, Sleepy, Bashful, Sneezy, Dopey & Doc</option>
<option value="charlie brown">Charlie Brown</option>
<option value="snoopy">Snoopy</option>
</select>
</div>
/* Select */
{
"label": "Select",
"label_text": "Select your favourite cartoon character",
"label_for": "select",
"label_description": "As the initial option is selected and disabled this is a mandatory field (once a selection has been made it is not possible to select no option.)",
"options": [
{
"option_text": "Select an option",
"option_value": null,
"selected": "selected",
"disabled": "disabled"
},
{
"option_text": "Bart Simpson",
"option_value": "bart"
},
{
"option_text": "Homer Simpson",
"option_value": "homer"
},
{
"option_text": "Marge Simpson",
"option_value": "marge"
},
{
"option_text": "Lisa Simpson",
"option_value": "lisa"
},
{
"option_text": "Ned Flanders",
"option_value": "ned"
},
{
"option_text": "Bugs Bunny",
"option_value": "bugs"
},
{
"option_text": "The 7 Dwarves: Grumpy, Happy, Sleepy, Bashful, Sneezy, Dopey, Doc",
"option_value": "7 Dwarves"
},
{
"option_text": "Charlie Brown",
"option_value": "charlie brown"
},
{
"option_text": "Snoopy",
"option_value": "snoopy"
}
]
}
/* Select (optional) */
{
"label": "Select (optional)",
"label_text": "Select your favourite cartoon character",
"label_for": "select-opt",
"label_description": "As the initial option is selected but not disabled this is an optional field (once a selection has been made it is possible to select no option.)",
"options": [
{
"option_text": "Select an option",
"option_value": null,
"selected": "selected",
"disabled": null
},
{
"option_text": "Bart Simpson",
"option_value": "bart"
},
{
"option_text": "Homer Simpson",
"option_value": "homer"
},
{
"option_text": "Marge Simpson",
"option_value": "marge"
},
{
"option_text": "Lisa Simpson",
"option_value": "lisa"
},
{
"option_text": "Ned Flanders",
"option_value": "ned"
},
{
"option_text": "Bugs Bunny",
"option_value": "bugs"
},
{
"option_text": "The 7 Dwarves: Grumpy, Happy, Sleepy, Bashful, Sneezy, Dopey, Doc",
"option_value": "7 Dwarves"
},
{
"option_text": "Charlie Brown",
"option_value": "charlie brown"
},
{
"option_text": "Snoopy",
"option_value": "snoopy"
}
]
}
/* Select (wide) */
{
"label": "Select (wide)",
"label_text": "Select your favourite cartoon character",
"label_for": "select-wide",
"label_description": null,
"select_classes": " input--block",
"options": [
{
"option_text": "Select an option",
"option_value": null,
"selected": "selected",
"disabled": "disabled"
},
{
"option_text": "Bart Simpson",
"option_value": "bart"
},
{
"option_text": "Homer Simpson",
"option_value": "homer"
},
{
"option_text": "Marge Simpson",
"option_value": "marge"
},
{
"option_text": "Lisa Simpson",
"option_value": "lisa"
},
{
"option_text": "Ned Flanders",
"option_value": "ned"
},
{
"option_text": "Bugs Bunny",
"option_value": "bugs"
},
{
"option_text": "The 7 Dwarves: Grumpy, Happy, Sleepy, Bashful, Sneezy, Dopey & Doc",
"option_value": "7 Dwarves"
},
{
"option_text": "Charlie Brown",
"option_value": "charlie brown"
},
{
"option_text": "Snoopy",
"option_value": "snoopy"
}
]
}
/* Select (wide, optional) */
{
"label": "Select (wide)",
"label_text": "Select your favourite cartoon character",
"label_for": "select-wide-optional",
"label_description": "As the initial option is selected but not disabled this is an optional field (once a selection has been made it is possible to select no option.)",
"select_classes": " input--block",
"options": [
{
"option_text": "Select an option",
"option_value": null,
"selected": "selected",
"disabled": null
},
{
"option_text": "Bart Simpson",
"option_value": "bart"
},
{
"option_text": "Homer Simpson",
"option_value": "homer"
},
{
"option_text": "Marge Simpson",
"option_value": "marge"
},
{
"option_text": "Lisa Simpson",
"option_value": "lisa"
},
{
"option_text": "Ned Flanders",
"option_value": "ned"
},
{
"option_text": "Bugs Bunny",
"option_value": "bugs"
},
{
"option_text": "The 7 Dwarves: Grumpy, Happy, Sleepy, Bashful, Sneezy, Dopey & Doc",
"option_value": "7 Dwarves"
},
{
"option_text": "Charlie Brown",
"option_value": "charlie brown"
},
{
"option_text": "Snoopy",
"option_value": "snoopy"
}
]
}