- A-Z
- Accordion
- Action
- Alert
- Breadcrumbs
- Button
- Card
- Checkboxes
- Cookie banner
- Date input
- Details
- Forms
- Group
- Help
- Hero
- Leave site
- Notification
- Pagination
- Progress
- Radios
- Select
- Select with hint
- Select with submission error
- Select with hint and submission error
- Select with conditional required text input
- Select with conditional optional textarea
- Select with conditional optional textarea (experimental)
- When to use this component
- When not to use this component
- Technical notes
- Other variants
- Status of development
- Signage
- Skip link
- Status
- Steps
- Summary list
- Table
- Tabs
- Text input
- Textarea
- Time input
Select
WIP — The first option (used as a placeholder, even if not a valid value) should never be disabled
<div class="form__group" id="select-example-1">
<label class="form__label" for="select-example-1-select">Network</label>
<select class="form__input" id="select-example-1-select">
<option value="select" id="select-example-1-placeholder">Select Network</option>
<option value="ba" id="select-example-1-ba">BA</option>
<option value="br" id="select-example-1-br">BR</option>
<option value="me" id="select-example-1-me">ME</option>
<option value="ns" id="select-example-1-ns">NS</option>
<option value="sg" id="select-example-1-sg">SG</option>
<option value="ss" id="select-example-1-ss">SS</option>
<option value="ws" id="select-example-1-ws">WS</option>
</select>
</div>Select with hint
<div class="form__group" id="select-example-2">
<label class="form__label" for="select-example-2-select">Network</label>
<p class="from__hint">Hint</p>
<select class="form__input" id="select-example-2-select">
<option value="select" id="select-example-2-placeholder">Select Network</option>
<option value="ba" id="select-example-2-ba">BA</option>
<option value="br" id="select-example-2-br">BR</option>
<option value="me" id="select-example-2-me">ME</option>
<option value="ns" id="select-example-2-ns">NS</option>
<option value="sg" id="select-example-2-sg">SG</option>
<option value="ss" id="select-example-2-ss">SS</option>
<option value="ws" id="select-example-2-ws">WS</option>
</select>
</div>Select with submission error
<div class="form__group form__group--error" id="select-example-3">
<label class="form__label" for="select-example-3-select">Network</label>
<p class="form__error-message">"Network" is required</p>
<select class="form__input form__input--error" id="select-example-3-select">
<option value="select" id="select-example-3-placeholder">Select Network</option>
<option value="ba" id="select-example-3-ba">BA</option>
<option value="br" id="select-example-3-br">BR</option>
<option value="me" id="select-example-3-me">ME</option>
<option value="ns" id="select-example-3-ns">NS</option>
<option value="sg" id="select-example-3-sg">SG</option>
<option value="ss" id="select-example-3-ss">SS</option>
<option value="ws" id="select-example-3-ws">WS</option>
</select>
</div>Select with hint and submission error
<div class="form__group form__group--error" id="select-example-4">
<label class="form__label" for="select-example-4-select">Network</label>
<p class="from__hint form__hint--error">Hint</p>
<p class="form__error-message">"Network" is required</p>
<select class="form__input form__input--error" id="select-example-4-select">
<option value="select" id="select-example-4-placeholder">Select Network</option>
<option value="ba" id="select-example-4-ba">BA</option>
<option value="br" id="select-example-4-br">BR</option>
<option value="me" id="select-example-4-me">ME</option>
<option value="ns" id="select-example-4-ns">NS</option>
<option value="sg" id="select-example-4-sg">SG</option>
<option value="ss" id="select-example-4-ss">SS</option>
<option value="ws" id="select-example-4-ws">WS</option>
</select>
</div>Select with conditional required text input
<div class="form__group" id="select-additional-example-1">
<label class="form__label" for="select-additional-example-1-select">Network</label>
<p class="form__hint">Select "Other" to show conditional required text input</p>
<select class="form__input" id="select-additional-example-1-select">
<option value="select" id="placeholder">Select Network</option>
<option value="ba">BA</option>
<option value="br">BR</option>
<option value="me">ME</option>
<option value="ns">NS</option>
<option value="sg">SG</option>
<option value="ss">SS</option>
<option value="ws">WS</option>
<option value="other">Other</option>
</select>
<div class="form__indent" data-parent-select-value="other" data-child-required>
<div class="form__group" id="select-additional-example-1-child">
<label class="form__label" for="select-additional-example-1-other">Location <noscript>(required if "Network" is "Other")</noscript></label>
<input class="form__input" id="select-additional-example-1-other" type="text">
</div>
</div>
</div>WIP -- noscript text (required if “Question” is “Option to reveal conditional content”)
Select with conditional optional textarea
<div class="form__group" id="select-additional-example-2">
<label class="form__label" for="select-additional-example-2-select">Network</label>
<p class="form__hint">Select "Other" to show conditional optional textarea</p>
<select class="form__input" id="select-additional-example-2-select">
<option value="select" id="placeholder">Select Network</option>
<option value="ba">BA</option>
<option value="br">BR</option>
<option value="me">ME</option>
<option value="ns">NS</option>
<option value="sg">SG</option>
<option value="ss">SS</option>
<option value="ws">WS</option>
<option value="other">Other</option>
</select>
<div class="form__indent" data-parent-select-value="other">
<div class="form__group" id="select-additional-example-2-child">
<label class="form__label" for="select-additional-example-2-other">Describe location (optional)</label>
<textarea class="form__textarea" id="select-additional-example-2-other" name="text-area" rows="6" maxlength="3000" data-countdown></textarea>
<p id="select-additional-example-2-other-countdown">You can enter up to 3000 characters</p>
</div>
</div>
</div>Select with conditional optional textarea (experimental)
<div class="form__group" id="select-additional-example-3">
<label class="form__label" for="select-additional-example-3-select">Network</label>
<p class="form__hint">Select "Other" to show conditional optional textarea</p>
<select class="form__input" id="select-additional-example-3-select">
<option value="select" id="select-additional-example-3-placeholder">Select Network</option>
<option value="ba" id="select-additional-example-3-ba">BA</option>
<option value="br" id="select-additional-example-3-br">BR</option>
<option value="me" id="select-additional-example-3-me">ME</option>
<option value="ns" id="select-additional-example-3-ns">NS</option>
<option value="sg" id="select-additional-example-3-sg">SG</option>
<option value="ss" id="select-additional-example-3-ss">SS</option>
<option value="ws" id="select-additional-example-3-ws">WS</option>
<option value="other" id="select-additional-example-3-other">Other</option>
</select>
<div class="form__indent" data-parent="select-additional-example-3-other">
<div class="form__group" id="select-additional-example-3-child">
<label class="form__label" for="select-additional-example-3-textarea">Describe location (optional)</label>
<textarea class="form__textarea" id="select-additional-example-3-textarea" name="text-area" rows="6" maxlength="3000" data-countdown></textarea>
<p id="select-additional-example-3-textarea-countdown">You can enter up to 3000 characters</p>
</div>
</div>
</div>When to use this component
WIP -- When there are 8 or more options and only one available selection. This is based on Millers’ Law (Ask JS).
When not to use this component
WIP -- Use radios if there is 6 or less options and only one available selection.
If a user has the option to select more than one option, use a check box group.
This component can be added within a conditional question.
Technical notes
WIP -- Do not use “disabled” attributes (usually for the first option, utilised as a placeholder). This causes the contrast on desktops on some browsers to have a weak contrast between background (light grey) and text (white) colours. Instead; remove disabled options and allow for user to input that option with error messaging as a fall back.
Other variants
See Radios for conditional text input / select / textarea options. Also hint and errors within conditional content
Status of development
The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.
| Development criteria | Status |
|---|---|
| WCAG 2.2 compliant | Not started |
| WCAG 2.1 compliant | Completed |
| HTML / Nunjucks version | In Progress |
| Figma version | Not started |
| M365 versions | Not started |
| Documentation | In progress |
Published 9 May 2024
Last updated 6 August 2024