Skip to content
ASP Digital Design System

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 use this form.

Published 9 May 2024
Last updated 23 January 2025