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 
<form action="/" accept-charset="UTF-8" method="post">
  <div class="cads-form-field">
    <div class="cads-form-field__content"><label class="cads-form-field__label" id="forms_select_select-label" for="forms_select_select-input">Example select <span class="cads-form-field__optional">(optional)</span></label><select id="forms_select_select-input" class="cads-select cads-input" aria-required="false" aria-invalid="false" name="forms_select[select]"><option value="tv_advert">TV advert</option>
        <option value="local_newspaper">Local newspaper advert</option>
        <option value="friend_family">Friend/family recommendation</option>
        <option value="internet">Website / internet search</option></select></div>
  </div>
</form>

<% @model = Forms::Select.valid_example %>
<%= form_with model: @model, url: "/" do |form| %>
  <%= form.cads_collection_select(
    :select,
    collection: @model.select_options,
    text_method: :name,
    value_method: :id
  ) %>
<% end %>

With hint

Open example in a new tab

Example hint text

<form action="/" accept-charset="UTF-8" method="post">
  <div class="cads-form-field">
    <div class="cads-form-field__content"><label class="cads-form-field__label" id="forms_select_select_hint-label" for="forms_select_select_hint-input">Example select with hint <span class="cads-form-field__optional">(optional)</span></label>
      <p class="cads-form-field__hint" id="forms_select_select_hint-hint">Example hint text</p>
      <select id="forms_select_select_hint-input" class="cads-select cads-input" aria-required="false" aria-invalid="false" aria-describedby="forms_select_select_hint-hint" name="forms_select[select_hint]"><option value="tv_advert">TV advert</option>
        <option value="local_newspaper">Local newspaper advert</option>
        <option value="friend_family">Friend/family recommendation</option>
        <option value="internet">Website / internet search</option></select></div>
  </div>
</form>

<% @model = Forms::Select.valid_example %>
<%= form_with model: @model, url: "/" do |form| %>
  <%= form.cads_collection_select(
    :select_hint,
    collection: @model.select_options,
    text_method: :name,
    value_method: :id,
    hint: "Example hint text"
  ) %>
<% end %>

With error

Open example in a new tab

Select an option

<form action="/" accept-charset="UTF-8" method="post">
  <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="forms_select_select_required-label" for="forms_select_select_required-input">Example select <span class="cads-form-field__optional">(optional)</span></label>
      <p class="cads-form-field__error-message" id="forms_select_select_required-error">Select an option</p>
      <select id="forms_select_select_required-input" class="cads-select cads-input" aria-required="false" aria-invalid="true" aria-describedby="forms_select_select_required-error" name="forms_select[select_required]"><option value="tv_advert">TV advert</option>
        <option value="local_newspaper">Local newspaper advert</option>
        <option value="friend_family">Friend/family recommendation</option>
        <option value="internet">Website / internet search</option></select></div>
  </div>
</form>

<% @model = Forms::Select.invalid_example %>
<%= form_with model: @model, url: "/" do |form| %>
  <%= form.cads_collection_select(
    :select_required,
    collection: @model.select_options,
    text_method: :name,
    value_method: :id
  ) %>
<% end %>

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

When using with Rails we recommend using the form builder method provided by CitizensAdviceComponents::FormBuilder.

cads_collection_select(attribute, collection:, value_method:, text_method:, options = {})

The method works similarly to the default collection_select helper.

<%= form_with model: @model, url: "/" do |form| %>
  <%= form.cads_collection_select(
    :example,
    collection: [
      ["option_1", "Option 1"],
      ["option_2", "Option 2"],
      ["option_3", "Option 3"],
      ["option_4", "Option 4"],
      ["option_5", "Option 5"],
    ],
    text_method: :first,
    value_method: :last,
    hint: "Example hint text",
    required: true
  ) %>
<% end %>

But this can also work with any collection:

<%= form_with model: @model, url: "/" do |form| %>
  <%= form.cads_collection_select(
    :example,
    collection: Locations.all,
    text_method: :id,
    value_method: :name,
    hint: "Example hint text"
  ) %>
<% end %>

The :value_method and :text_method parameters are methods to be called on each member of collection. The return values are used as the value attribute and contents of each <option> tag, respectively.

The method accepts an options hash with the following optional parameters:

  • :label - The text for the label associated with the input. Defaults to using translations.
  • :hint - Hint text for the input
  • :required - Boolean indicating the field is optional (i.e. not required)

View component version

We also provide an older view component version of the component

<%= render CitizensAdviceComponents::Select.new(
  select_options: [
    ["tv_advert", "TV advert"],
    ["local_newspaper", "Local newspaper advert"],
    ["friend_family", "Friend/family recommendation"],
    ["internet", "Website / internet search"]
  ],
  name: "how_did_you_hear",
  label: "How you heard about Citizens Advice"
) %>
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)