Example
Example
HTML
<!-- Select -->
<form id="selects" class="coop-form" novalidate>
<h3>Select</h3>
<div class="coop-form__row">
<label class="coop-form__label" for="sort-by-1">Sort by:</label>
<p id="sort-by-1-error" class="coop-form__error" hidden></p>
<select id="sort-by-1" class="coop-form__field coop-form__select">
<option value="">Please select</option>
<option value="relevancy" selected>Relevancy</option>
<option value="price-asc">Price: Low to high</option>
<option value="price-desc">Price: High to low</option>
</select>
</div>
</form>
<!-- Select with hint -->
<form id="selects-hint" class="coop-form" novalidate>
<h3>Select with hint</h3>
<div class="coop-form__row">
<label class="coop-form__label" for="sort-by-2">Sort by:</label>
<p id="sort-by-2-hint" class="coop-form__hint">This is an example hint</p>
<p id="sort-by-2-error" class="coop-form__error" hidden></p>
<select id="sort-by-2" class="coop-form__field coop-form__select" aria-describedby="sort-by-2-hint">
<option value="">Please select</option>
<option value="relevancy" selected>Relevancy</option>
<option value="price-asc">Price: Low to high</option>
<option value="price-desc">Price: High to low</option>
</select>
</div>
</form>
<!-- Select with error message -->
<form id="selects-error" class="coop-form" novalidate>
<h3>Select with error message</h3>
<div class="coop-form__row">
<label class="coop-form__label" for="sort-by-3">Sort by:</label>
<p id="sort-by-3-error" class="coop-form__error">Select a sort by option</p>
<select id="sort-by-3" class="coop-form__field coop-form__select coop-form__invalid" aria-describedby="sort-by-3-error">
<option value="">Please select</option>
<option value="relevancy">Relevancy</option>
<option value="price-asc">Price: Low to high</option>
<option value="price-desc">Price: High to low</option>
</select>
</div>
</form>
<!-- Select with hint and error message -->
<form id="selects-hint-error" class="coop-form" novalidate>
<h3>Select with hint and error message</h3>
<div class="coop-form__row">
<label class="coop-form__label" for="sort-by-4">Sort by:</label>
<p id="sort-by-4-hint" class="coop-form__hint">This is an example hint</p>
<p id="sort-by-4-error" class="coop-form__error">Select a sort by option</p>
<select id="sort-by-4" class="coop-form__field coop-form__select coop-form__invalid" aria-describedby="sort-by-4-hint sort-by-4-error">
<option value="">Please select</option>
<option value="relevancy">Relevancy</option>
<option value="price-asc">Price: Low to high</option>
<option value="price-desc">Price: High to low</option>
</select>
</div>
</form>
Design and content
We do not advise the use of select because research shows that some users find selects very difficult to use. We follow the same guidelines as Gov.uk.
Accessibility
Watch a video about how some users struggle with selects.