Select field
The select component allows users to choose an option from a long list.
Before using the 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.
Select field with a label and hint
Data
departments = [
OpenStruct.new(id: 1, name: 'Sales'),
OpenStruct.new(id: 2, name: 'Marketing'),
OpenStruct.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" } %>
Rendered output
You can find it on your ID badge
HTML output
<div class="govuk-form-group">
<label for="person-new-department-id-field" class="govuk-label">
Which department do you work in?
</label>
<span class="govuk-hint" id="person-new-department-id-hint">
You can find it on your ID badge
</span>
<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>