Skip to content
ASP Digital Design System

Your web browser is out of date

Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.

Cookies disabled

Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.

Select

WIP — The first option (used as a placeholder, even if not a valid value) should never be disabled.
It also copies the preceding label. E.g. if the label is Network, the placeholder is Select network.

Open this example in a new tab: select

Copy code: select

<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

Open this example in a new tab: select

Copy code: select

<div class="form__group" id="select-example-2">  
  <label class="form__label" for="select-example-2-select">Network</label>  
  <p class="form__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

Open this example in a new tab: select

Copy code: select

<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

Open this example in a new tab: select

Copy code: select

<div class="form__group form__group--error" id="select-example-4">  
  <label class="form__label" for="select-example-4-select">Network</label>  
  <p class="form__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

Open this example in a new tab: select

Copy code: select

<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

Open this example in a new tab: select

Copy code: select

<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)

Open this example in a new tab: select

Copy code: select

<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 7 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

Submit a request

Request a change or addition to the design system: this form.

Published 9 May 2024
Last updated 23 January 2025