- Taxonomic name: A-DROPDOWN
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.5.0 (23/03/21)
Dropdown
Dropdown lists allow users to select an option from a list of more than five items.
Design and usage
- Use to select from a list of between five and 15 options.
- Order in the most logical way, eg. alphabetically, in order of popularity, or grouped.
- Can include group headings that aren't clickable.
- Aria-invalid must be used to indicate when an error has occurred with this element.
- Aria-describedby must be used to link any help, instructional and/or error text with the element/form fields.
- Do not use to select from a list of less than five options - use segmented controls instead.
- Do not use to select from a list of more that 15 options - either revise the number of options or allow users to enter their own data in a text field.
Examples
Standard dropdown
Interactive example
Code example
<div class="m-form-row">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<span class="a-dropdown">
<select class="a-dropdown__select" name="..." id="...">
...
</select>
<span class="a-dropdown__ui"></span>
</span>
</div>
</div>
Valid dropdown
Interactive example
Code example
<div class="m-form-row is-valid">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<p class="m-form-row__validation-message">...</p>
<span class="a-dropdown">
<select class="a-dropdown__select" name="..." id="..." >
...
</select>
<span class="a-dropdown__ui"></span>
</span>
</div>
</div>
Errored dropdown
Interactive example
Code example
<div class="m-form-row is-error">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<p class="m-form-row__error-message" id="..."><span class="u-hidden--visually">Error: </span>...</p>
<span class="a-dropdown">
<select class="a-dropdown__select" name="..." id="..." aria-invalid="true" aria-describedby="...">
...
</select>
<span class="a-dropdown__ui"></span>
</span>
</div>
</div>
Disabled dropdown
Interactive example
Code example
<div class="m-form-row is-disabled">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<span class="a-dropdown">
<select class="a-dropdown__select" name="..." id="..." disabled>
...
</select>
<span class="a-dropdown__ui"></span>
</span>
</div>
</div>
Required dropdown
<div class="m-form-row">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<span class="a-dropdown">
<select class="a-dropdown__select" name="..." id="..." aria-required="true">
...
</select>
<span class="a-dropdown__ui"></span>
</span>
</div>
</div>
Development and test
Notes for developers
When disabling form elements, do not solely rely on the is-disabled
class, but ensure that the disabled
attribute is also set on the relevant form element or input. If an entire set of form elements is to be disabled, the is-disabled
class and disabled
attribute should be added directly to the fieldset instead, and not to each individual element within it. However if only one element from the set is disabled, then the class and attribute should be applied to that element only.
If the native form validation needs to be disabled set the novalidate
attribute on the form.
Aria usage for errors and help text
To aid screen reader users in completing forms without error and also with understanding and fixing any errors that have occured, some additional aria attributes are now recommended to be applied across all form fields/rows.
All form row help, explanatory text, form row instructions and form row errors must have a unique id assigned to them and be appropriately linked to either the individual form input or the form row using aria-describedby
. This ensures that the help text is read out immediately on focus of the form input/fieldset. When there is more that one item that requires referencing within the aria-describedby
attribute the id values must be supplied in the form of a space separated list. For example if there is an error with id of 'err1' and help text with id of 'help1' the value for the aria-describedby
attribute would be 'err1 help1'.
All inline form error messages should start with the hidden text 'Error: ' so that when read by out by a screen reader it is immediately clear that the text being read is an error message.
All erroring form fields (or fieldset if a group or radios/checkboxes) must have aria-invalid="true"
set on them, ensuring that when a user focus' on an errored form field, the field will be announced as invalid, so the user is then aware that there in an issue that requires fixing.
When linking help or errors, or even adding aria-invalid to the markup careful consideration must be taken as to where it is most appropriate to apply the value. The following rules should be used to decide where the attribute(s) should be applied.
- Single form field - All attributes should be applied directly to that form field
- Group of form fields but only one in error or help text applies to only one - Apply the attribute(s) to the only field in error or where the help text applies
- Group of form field where all in error or the help text applies to all - Apply the attribute(s) to the groups surrounding fieldset (form row)
There may situations where more than one of these rules applies to the overall form row for example a date range where the instruction text applies to both fields so should be linked to the fieldset for the date range but one of the two fields is in error so the error should be linked to just that field not to the fieldset.
Important messages
To help those using assistive technologies, make sure that success/error messages which need to be announced to users have their aria attributes updated to role="alert"
and/or aria-live="assertive"
.
Using autocomplete
Users appreciate when websites save them time by automatically filling common fields like names, email addresses and other frequently used fields, plus it helps to reduce potential input errors, especially on virtual keyboards and small devices.
Browsers use many methods to determine which fields they can auto-populate based on previously specified data by the user, and you can give hints to the browser by providing both the name
attribute and the autocomplete
attribute on each input element.
Further details can be found in the developer notes on the form introduction page.
Notes for testers
- In some older browsers such as IE8, when options within the dropdown list exceed the width of the dropdown, the overflowing text is truncated; check that the options would still be understandable if this occurs.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
Class | Outcome | Required | Applied to | Comments |
---|---|---|---|---|
a-dropdown |
Styling for the dropdown | Yes | span |
|
a-dropdown__select |
Styling for the dropdown box | Yes | .a-dropdown > input |
|
a-dropdown__ui |
Styling for the dropdown arrow | Yes | a-dropdown__select + span |
Keyboard operations
- TAB
-
Tabbing to an dropdown field should make the input clearly visually different so that the focus point on the page is obvious to the user.
- CURSOR KEYS
-
With focus on the dropdown field, pressing any CURSOR KEY the selected option will update to the next/previous option within the list of options.
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.5.0 (23/03/21)
Latest update:
- updated: Additional aria attributes are now recommended to be applied across all form fields/rows so as to aid screen reader users in completing forms without error and also with understanding and fixing any errors that have occurred.