@citizensadvice/cads-form-selects

Component

Usage no npm install needed!

<script type="module">
  import citizensadviceCadsFormSelects from 'https://cdn.skypack.dev/@citizensadvice/cads-form-selects';
</script>

README

Form selects

npm (scoped)

Component type

  • Component

Dependencies:

Name Description
@citizensadvice/cads-support System-wide global variables and functions
@citizensadvice/cads-interactive-block Mixins for handling interactive element (buttons, inputs)

Installation

$ npm install @citizensadvice/cads-form-selects

@import "@citizensadvice/cads-form-selects/index.scss";

You can also make use of the unpkg service, try adding the link below to the head of your HTML file <link src="https://unpkg.com/@citizensadvice/cads-form-selects@latest/build/cads.form-selects.css" />

Implementation

Selects can also be referred to as "Dropdowns".

Avoid dropdowns if you can. They should be avoided for a number of reasons:

  • they hide the options available. Users have to interact with the element before they know what they’re being asked, which makes it harder to comprehend things at a glance.
  • research has shown that users with low digital literacy can struggle with dropdowns. This is especially an issue when they contain a lot of options - either they don’t know how to interact with them, or they’re unaware that they can scroll through the list.
  • they can cause accessibility issues. On some devices the list of options cannot be zoomed, which means that some people with visual impairments cannot use them.

To avoid dropdowns consider how to present the list of options:

  • can you present it as a list of radio buttons. Even if the page is long users find these easier to use sometimes it’s better to just let users type their response as free text can the long list be broken into multiple shorter lists by asking a few questions up-front to filter out options.

If you still require this design pattern, below is an example:

<fieldset class="c-fieldset">
  <label class="c-label" for="select1">Example dropdown select</label>
  <div class="c-select">
    <select id="select1">
      <option value="Please select">Please select</option>
      <option value="Option #1">Option #1</option>
      <option value="Option #2">Option #2</option>
      <option value="Option #3">Option #3</option>
      <option value="Option #4">Option #4</option>
      <option value="Option #5">Option #5</option>
    </select>
  </div>
</fieldset>