Overview
Select boxes, also known as dropdown lists, provide a space-saving and convenient way to present multiple choices to users while occupying minimal screen real estate.
We currently only have one style of select box but like other forms components it is available in both the filled and outlined styles.
Default outlined
Vanilla example
Palette
Hint text
<!-- Label for the select element -->
<label for="select-example" class="qld__label">Form label</label>
<!-- Hint text associated via 'aria-describedby' -->
<span class="qld__hint-text" id="select-example-hint">Hint text</span>
<!-- Select wrapper -->
<div class="qld__select ">
<!-- Select field -->
<select id="select-example" class="qld__select-control qld__field-width--half qld__text-input--block" aria-describedby="select-example-hint">
<!-- Default prompt option -->
<option value="">Please select</option>
<!-- Available options for selection -->
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
Default filled
Vanilla example
Palette
Hint text
<!-- Filled modifier class (Should be applied site wide level) -->
<div class="qld__form-style-filled">
<!-- Label for the select element -->
<label for="select-example" class="qld__label">Form label</label>
<!-- Hint text associated via 'aria-describedby' -->
<span class="qld__hint-text" id="select-example-hint">Hint text</span>
<!-- Select wrapper -->
<div class="qld__select">
<!-- Select field -->
<select id="select-example" class="qld__select-control qld__select-control qld__field-width--half qld__text-input--block" aria-describedby="select-example-hint">
<!-- Default prompt option -->
<option value="">Please select</option>
<!-- Available options for selection -->
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
Valid and invalid states
Vanilla example
Palette
Error message
Error message
Hint text
Success message
Hint text
Success message
<div class="row">
<div class="co-xs-12 col-lg-4">
<!-- Example: Invalid select field -->
<!-- Label for the select element -->
<label for="invalid-select-example" class="qld__label">Selecct label</label>
<!-- Hint text associated via 'aria-describedby' -->
<span id="select-field-error-message-1" class="qld__input--error">
<svg class="qld__icon qld__icon--lead qld__icon--sm" role="img" aria-label="Error: ">
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#status-error">
</svg>Error message
</span>
<!-- Select wrapper -->
<div class="qld__select">
<!-- Select field -->
<select id="invalid-select-example" class="qld__select-control qld__text-input--block qld__text-input--error" aria-describedby="select-field-error-message-1">
<option value="">Please select</option> <!-- Default prompt option -->
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
<div class="qld__form-style-filled co-xs-12 col-lg-4">
<!-- Example: Invalid select field filled style -->
<!-- Label for the select element -->
<label for="invalid-select-filled-example" class="qld__label">Select label</label>
<!-- Hint text associated via 'aria-describedby'' -->
<span id="select-field-error-message-2" class="qld__input--error">
<svg class="qld__icon qld__icon--lead qld__icon--sm" role="img" aria-label="Error: ">
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#status-error">
</svg>Error message
</span>
<!-- Select wrapper -->
<div class="qld__select">
<!-- Select field -->
<select id="invalid-select-filled-example" class="qld__select-control qld__text-input--block qld__text-input--error" aria-describedby="select-field-error-message-2">
<option value="">Please select</option> <!-- Default prompt option -->
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
<div class="row qld__margin-t-component">
<div class="co-xs-12 col-lg-4">
<!-- Example: Success field -->
<!-- Label for the select element -->
<label for="select-example-valid" class="qld__label">Select label</label>
<!-- Hint text associated via 'aria-describedby' -->
<span class="qld__hint-text" id="select-example-valid-hint">Hint text</span>
<!-- Success message displayed below the select element, associated via 'aria-describedby' -->
<span id="select-field-success-message-1" class="qld__input--success">
<svg class="qld__icon qld__icon--lead qld__icon--sm" role="img" aria-label="Success: ">
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#status-success">
</svg>Success message
</span>
<!-- Select wrapper -->
<div class="qld__select">
<!-- Select field -->
<select id="select-example-valid" class="qld__select-control qld__text-input--block qld__text-input--valid" aria-describedby="select-example-valid-hint select-field-success-message-1">
<option value="">Please select</option> <!-- Default prompt option -->
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
<div class="qld__form-style-filled co-xs-12 col-lg-4">
<!-- Example: Success field filled style -->
<!-- Label for the select element -->
<label for="select-filled-example-valid" class="qld__label">Select label</label>
<!-- Hint text associated via 'aria-describedby' -->
<span class="qld__hint-text" id="select-filled-example-valid-hint">Hint text</span>
<!-- Success message displayed below the select element, associated via 'aria-describedby' -->
<span id="select-field-success-message-2" class="qld__input--success">
<svg class="qld__icon qld__icon--lead qld__icon--sm" role="img" aria-label="Success: ">
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#status-success">
</svg>Success message
</span>
<!-- Select wrapper -->
<div class="qld__select">
<!-- Select field -->
<select id="select-filled-example-valid" class="qld__select-control qld__text-input--block qld__text-input--valid" aria-describedby="select-filled-example-valid-hint select-field-success-message-2">
<option value="">Please select</option> <!-- Default prompt option -->
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
Usage guidelines
Select boxes are commonly used in user interfaces when the user needs to choose one option from a list of available options. However, there are situations when other components might be more suitable.
Select boxes should be a last resort because they’re hard to use. Try radio buttons instead. Or use an autocomplete, if there’s a long list of options (Silver, 2019).
According to the DTA now known as Gold Design System some of the reasons why select boxes should be avoided is that they have several inherent disadvantages:
- they're implemented inconsistently on various devices
- they hide content from the user by default
- they present usability difficulties for users with low digital literacy.
When to use
- When the user is required to make a single choice from the list: Select components are designed for situations where the user can only pick one option
- When the list of options is relatively long (more than 5 options): In this case, a select component provides a more efficient and compact way to display the choices
- When the list of options is dynamic or may change: Select components can easily accommodate changes to the list of options without causing significant layout shifts
- When space is limited: Select components are ideal when you need to save screen real estate because they only display the selected option when not in use
When not to use
- When there are fewer than 5 options: In this case, using radio buttons or checkboxes can make it easier for the user to see all options at once and make a decision
- When multiple selections are allowed: If the user needs to choose more than one option, consider using checkboxes or a multi-select component instead
- When each option requires additional context or explanation
- When immediate action is required upon selection: If selecting an option should trigger an immediate action or change in the interface, consider using a different component like a group of buttons
How to use
- When including a listbox or dropdown list in your design, always display the options in a logical order
- Have a default option selected whenever possible or use “Select” as a placeholder option only if there’s no logical default option (Polaris n.d.)