Select

The select and collection select components allow users to choose an option from a long list.

Before using a select component try asking users questions which will allow you to present them with fewer options.

Asking questions means you’re less likely to need to use the select component and can consider using a different solution, such as radios.

Important

Note that Rails now adds presence validation to associations automatically but usually we set relationships by assigning values to the foreign key column.

This results in errors being added to the object on attributes that don’t appear in the form, for example on department instead of department_id.

You can suppress this behaviour by adding optional: true to the relationship and manually adding the presence validation to the foreign key field yourself.

Select field with a label and hint

Data

department = Struct.new(:id, :name, keyword_init: true)
departments = [
  department.new(id: 1, name: 'Sales'),
  department.new(id: 2, name: 'Marketing'),
  department.new(id: 3, name: 'Finance')
]

Input

= f.govuk_collection_select :new_department_id,
  departments,
  :id,
  :name,
  label: { text: "Which department do you work in?" },
  hint: { text: "You can find it on your ID badge" }

<%= f.govuk_collection_select :new_department_id, departments, :id, :name, label: { text: "Which department do you work in?" }, hint: { text: "You can find it on your ID badge" } %>

Output

You can find it on your ID badge

<div class="govuk-form-group">
  <label for="person-new-department-id-field" class="govuk-label">
    Which department do you work in?
  </label>
  <div class="govuk-hint" id="person-new-department-id-hint">
    You can find it on your ID badge
  </div>
  <select id="person-new-department-id-field" class="govuk-select" aria-describedby="person-new-department-id-hint" name="person[new_department_id]">
    <option value="1">
      Sales
    </option>
    <option value="2">
      Marketing
    </option>
    <option value="3">
      Finance
    </option>
  </select>
</div>

Taking greater control over the options

The #govuk_select helper offers extra control over the contents of a select element. Like its Rails counterpart, #select the options can be set in a number of ways:

• options_for_select
• grouped_options_for_select
• options_from_collection_for_select
• option_groups_from_collection_for_select
• manually specifying the options using a block of HTML

Data

grouped_lunch_options = {
  "Sandwiches" => { "Ploughman's lunch" => :pl, "Tuna mayo" => :tm },
  "Salads" => { "Greek salad" => :gs, "Tabbouleh" => :tb }
}

Input

= f.govuk_select(:lunch_id, label: { text: "Preferred lunch", size: "m" }) do
  - grouped_lunch_options.each do |group_name, menu_items|
    optgroup label=group_name
      - menu_items.each do |name, value|
        option value=value data-tags=name.downcase
          = name

<%= f.govuk_select(:lunch_id, label: { text: "Preferred lunch", size: "m" }) do
grouped_lunch_options.each do |group_name, menu_items|
 %><optgroup<% _slim_codeattributes1 = group_name; if _slim_codeattributes1; if _slim_codeattributes1 == true %> label=""<% else %> label="<%= _slim_codeattributes1 %>"<% end; end %>>
<% menu_items.each do |name, value|
 %><option<% _slim_codeattributes2 = name.downcase; if _slim_codeattributes2; if _slim_codeattributes2 == true %> data-tags=""<% else %> data-tags="<%= _slim_codeattributes2 %>"<% end; end; _slim_codeattributes3 = value; if _slim_codeattributes3; if _slim_codeattributes3 == true %> value=""<% else %> value="<%= _slim_codeattributes3 %>"<% end; end %>>
<%= name %>
</option><% end %></optgroup><% end; end %>

Output

<div class="govuk-form-group">
  <label for="person-lunch-id-field" class="govuk-label govuk-label--m">
    Preferred lunch
  </label>
  <select id="person-lunch-id-field" class="govuk-select" name="person[lunch_id]">
    <optgroup label="Sandwiches">
      <option data-tags="ploughman's lunch" value="pl">
        Ploughman's lunch
      </option>
      <option data-tags="tuna mayo" value="tm">
        Tuna mayo
      </option>
    </optgroup>
    <optgroup label="Salads">
      <option data-tags="greek salad" value="gs">
        Greek salad
      </option>
      <option data-tags="tabbouleh" value="tb">
        Tabbouleh
      </option>
    </optgroup>
  </select>
</div>