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,
    @model.select_options,
    :id,
    :name
  ) %>
<% 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,
    @model.select_options,
    :id,
    :name,
    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,
    @model.select_options,
    :id,
    :name
  ) %>
<% 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 = {}, html_options = {})

The method works similarly to the default collection_select helper.

<%= form_with model: @model, url: "/" do |form| %>
  <%= form.cads_collection_select(
    :example,
    [
      ["option_1", "Option 1"],
      ["option_2", "Option 2"],
      ["option_3", "Option 3"],
      ["option_4", "Option 4"],
      ["option_5", "Option 5"],
    ],
    :first,
    :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,
    Locations.all,
    :id,
    :name,
    hint: "Example hint text"
  ) %>
<% end %>

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)