Alpha

This is an alpha release of our documentation site. View the roadmap.

Select

On this page

A select component allows the user to choose an option from a list which is displayed in a dropdown.

Examples

Default

Open example in a new tab 
<div class="cads-form-field">
  <div class="cads-form-field__content">
    <label class="cads-form-field__label" id="product-label" for="product-input">
      Choose a product
    </label>
    <select class="cads-select cads-input" id="product-input" name="product" aria-required="true" aria-invalid="false"><option value="casebook">Casebook</option>
      <option value="content-platform">Content platform</option>
      <option value="smart-meter-tool">SMT</option>
      <option value="FYLCA">Find your local Citizens Advice</option></select>
  </div>
</div>
<%= render(CitizensAdviceComponents::Select.new(
  select_options: [
    ["Casebook", "casebook"],
    ["Content platform", "content-platform"],
    ["SMT", "smart-meter-tool"],
    ["Find your local Citizens Advice", "FYLCA"]
  ],
  name: "product",
  label: "Choose a product")) %>

Optional

Open example in a new tab 
<div class="cads-form-field">
  <div class="cads-form-field__content">
    <label class="cads-form-field__label" id="product-label" for="product-input">
      Choose a product
      <span class="cads-form-field__optional">(optional)</span>
    </label>
    <select class="cads-select cads-input" id="product-input" name="product" aria-required="false" aria-invalid="false"><option value="casebook">Casebook</option>
      <option value="content-platform">Content platform</option>
      <option value="smart-meter-tool">SMT</option>
      <option value="FYLCA">Find your local Citizens Advice</option></select>
  </div>
</div>
<%= render CitizensAdviceComponents::Select.new(
      select_options: [
        ["Casebook", "casebook"],
        ["Content platform", "content-platform"],
        ["SMT", "smart-meter-tool"],
        ["Find your local Citizens Advice", "FYLCA"]
      ],
      name: "product",
      label: "Choose a product",
      options: {
        optional: true
      }
) %>

With error

Open example in a new tab

Select a product 

<div class="cads-form-field cads-form-field--has-error">
  <div class="cads-form-field__error-marker"></div>
  <div class="cads-form-field__content">
    <label class="cads-form-field__label" id="product-label" for="product-input">
      Choose a product
    </label>
    <p class="cads-form-field__error-message" id="product-error" data-testid="error-message">
      Select a product
    </p>
    <select class="cads-select cads-input" id="product-input" name="product" aria-required="true" aria-invalid="true" aria-describedby="product-error"><option value="casebook">Casebook</option>
      <option value="content-platform">Content platform</option>
      <option value="smart-meter-tool">SMT</option>
      <option value="FYLCA">Find your local Citizens Advice</option></select>
  </div>
</div>
<%= render(CitizensAdviceComponents::Select.new(
  select_options: [
    ["Casebook", "casebook"],
    ["Content platform", "content-platform"],
    ["SMT", "smart-meter-tool"],
    ["Find your local Citizens Advice", "FYLCA"]
  ],
  name: "product",
  label: "Choose a product",
  options: { error_message: "Select a product" })) %>

With hint

Open example in a new tab

Choose a product from the list below

<div class="cads-form-field">
  <div class="cads-form-field__content">
    <label class="cads-form-field__label" id="product-label" for="product-input">
      Choose a product
    </label>
    <p class="cads-form-field__hint" id="product-hint" data-testid="hint-message">Choose a product from the list below</p>
    <select class="cads-select cads-input" id="product-input" name="product" aria-required="true" aria-invalid="false" aria-describedby="product-hint"><option value="casebook">Casebook</option>
      <option value="content-platform">Content platform</option>
      <option value="smart-meter-tool">SMT</option>
      <option value="FYLCA">Find your local Citizens Advice</option></select>
  </div>
</div>
<%= render(CitizensAdviceComponents::Select.new(
  select_options: [
    ["Casebook", "casebook"],
    ["Content platform", "content-platform"],
    ["SMT", "smart-meter-tool"],
    ["Find your local Citizens Advice", "FYLCA"]
  ],
  name: "product",
  label: "Choose a product",
  options: { hint: "Choose a product from the list below" })) %>

With value

Open example in a new tab

Choose a product from the list below

<div class="cads-form-field">
  <div class="cads-form-field__content">
    <label class="cads-form-field__label" id="product-label" for="product-input">
      Choose a product
    </label>
    <p class="cads-form-field__hint" id="product-hint" data-testid="hint-message">Choose a product from the list below</p>
    <select class="cads-select cads-input" id="product-input" name="product" aria-required="true" aria-invalid="false" aria-describedby="product-hint"><option value="casebook">Casebook</option>
      <option value="content-platform">Content platform</option>
      <option value="smart-meter-tool">SMT</option>
      <option selected="selected" value="FYLCA">Find your local Citizens Advice</option></select>
  </div>
</div>
<%= render(CitizensAdviceComponents::Select.new(
  select_options: [
    ["Casebook", "casebook"],
    ["Content platform", "content-platform"],
    ["SMT", "smart-meter-tool"],
    ["Find your local Citizens Advice", "FYLCA"]
  ],
  name: "product",
  label: "Choose a product",
  options: { value: "FYLCA", hint: "Choose a product from the list below" })) %>

When not to use

Do not use a select component when there are few options for the users to choose from. In those cases an alternative could be the radio group component.

Using with Rails

If you are using the citizens_advice_components gem, you can call the component from within a template using:

<%= render(CitizensAdviceComponents::Select.new(
  select_options: [
    ["Casebook", "casebook"],
    ["Content platform", "content-platform"],
    ["SMT", "smart-meter-tool"],
    ["Find your local Citizens Advice", "FYLCA"]
  ],
  name: "product",
  label: "Choose a product")) %>

Component arguments

Argument Description
Argument name Description Required, field name
Argument legend Description Required, the text for the fieldset legend associated with the inputs
Argument select_options Description Required, an array of options to be displayed in a dropdown list
Argument options Description Optional, a hash with one or more of the following values
Argument hint Description → Optional, hint text for the input
Argument error_message Description → Optional, an error message for the input
Argument optional Description → Optional, boolean indicating the field is optional (ie not required)