Date input
On this page
A date input field allows the user to enter a date they remember.
Examples
Default
<form action="/" accept-charset="UTF-8" method="post">
<div class="cads-form-field">
<div class="cads-form-field__content">
<fieldset class="cads-form-group"><legend class="cads-form-field__label">Example date field <span class="cads-form-field__optional">(optional)</span></legend>
<div class="cads-date-input">
<div class="cads-date-input">
<div class="cads-date-input__item"><label class="cads-form-field__label" for="forms_date_field_date_field-input">Day</label><input class="cads-input cads-input--2ch" name="forms_date_field[date_field(3i)]" id="forms_date_field_date_field-input" inputmode="numeric"></div>
</div>
<div class="cads-date-input">
<div class="cads-date-input__item"><label class="cads-form-field__label" for="forms_date_field_date_field_2i">Month</label><input class="cads-input cads-input--2ch" name="forms_date_field[date_field(2i)]" id="forms_date_field_date_field_2i" inputmode="numeric"></div>
</div>
<div class="cads-date-input">
<div class="cads-date-input__item"><label class="cads-form-field__label" for="forms_date_field_date_field_1i">Year</label><input class="cads-input cads-input--4ch" name="forms_date_field[date_field(1i)]" id="forms_date_field_date_field_1i" inputmode="numeric"></div>
</div>
</div>
</fieldset>
</div>
</div>
</form>
<%= form_with model: Forms::DateField.new, url: "/" do |form| %>
<%= form.cads_date_field(:date_field) %>
<% end %>
With hint
<form action="/" accept-charset="UTF-8" method="post">
<div class="cads-form-field">
<div class="cads-form-field__content">
<fieldset class="cads-form-group" aria-describedby="forms_date_field_date_field_hint-hint"><legend class="cads-form-field__label">Example date field with hint <span class="cads-form-field__optional">(optional)</span></legend>
<p class="cads-form-field__hint" id="forms_date_field_date_field_hint-hint">Enter your date of birth, like 01 02 1990</p>
<div class="cads-date-input">
<div class="cads-date-input">
<div class="cads-date-input__item"><label class="cads-form-field__label" for="forms_date_field_date_field_hint-input">Day</label><input class="cads-input cads-input--2ch" name="forms_date_field[date_field_hint(3i)]" id="forms_date_field_date_field_hint-input" inputmode="numeric"></div>
</div>
<div class="cads-date-input">
<div class="cads-date-input__item"><label class="cads-form-field__label" for="forms_date_field_date_field_hint_2i">Month</label><input class="cads-input cads-input--2ch" name="forms_date_field[date_field_hint(2i)]" id="forms_date_field_date_field_hint_2i" inputmode="numeric"></div>
</div>
<div class="cads-date-input">
<div class="cads-date-input__item"><label class="cads-form-field__label" for="forms_date_field_date_field_hint_1i">Year</label><input class="cads-input cads-input--4ch" name="forms_date_field[date_field_hint(1i)]" id="forms_date_field_date_field_hint_1i" inputmode="numeric"></div>
</div>
</div>
</fieldset>
</div>
</div>
</form>
<%= form_with model: Forms::DateField.new, url: "/" do |form| %>
<%= form.cads_date_field(:date_field_hint, hint: "Enter your date of birth, like 01 02 1990") %>
<% end %>
With error message
<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">
<fieldset class="cads-form-group" aria-describedby="forms_date_field_date_field_required-error"><legend class="cads-form-field__label">Example date field <span class="cads-form-field__optional">(optional)</span></legend>
<p class="cads-form-field__error-message" id="forms_date_field_date_field_required-error">Date must be in the past</p>
<div class="cads-date-input">
<div class="cads-date-input">
<div class="cads-date-input__item"><label class="cads-form-field__label" for="forms_date_field_date_field_required-input">Day</label><input class="cads-input cads-input--2ch cads-input--error" name="forms_date_field[date_field_required(3i)]" id="forms_date_field_date_field_required-input" inputmode="numeric" value="18"></div>
</div>
<div class="cads-date-input">
<div class="cads-date-input__item"><label class="cads-form-field__label" for="forms_date_field_date_field_required_2i">Month</label><input class="cads-input cads-input--2ch cads-input--error" name="forms_date_field[date_field_required(2i)]" id="forms_date_field_date_field_required_2i" inputmode="numeric" value="3"></div>
</div>
<div class="cads-date-input">
<div class="cads-date-input__item"><label class="cads-form-field__label" for="forms_date_field_date_field_required_1i">Year</label><input class="cads-input cads-input--4ch cads-input--error" name="forms_date_field[date_field_required(1i)]" id="forms_date_field_date_field_required_1i" inputmode="numeric" value="2026"></div>
</div>
</div>
</fieldset>
</div>
</div>
</form>
<%= form_with model: Forms::DateField.invalid_example, url: "/" do |form| %>
<%= form.cads_date_field(:date_field_required) %>
<% end %>
Page heading
<form action="/" accept-charset="UTF-8" method="post">
<div class="cads-form-field">
<div class="cads-form-field__content">
<fieldset class="cads-form-group"><legend class="cads-form-field__label">
<h1 class="cads-page-title">Example date field with page heading</h1>
</legend>
<div class="cads-date-input">
<div class="cads-date-input">
<div class="cads-date-input__item"><label class="cads-form-field__label" for="forms_date_field_date_field_page_heading-input">Day</label><input class="cads-input cads-input--2ch" name="forms_date_field[date_field_page_heading(3i)]" id="forms_date_field_date_field_page_heading-input" inputmode="numeric"></div>
</div>
<div class="cads-date-input">
<div class="cads-date-input__item"><label class="cads-form-field__label" for="forms_date_field_date_field_page_heading_2i">Month</label><input class="cads-input cads-input--2ch" name="forms_date_field[date_field_page_heading(2i)]" id="forms_date_field_date_field_page_heading_2i" inputmode="numeric"></div>
</div>
<div class="cads-date-input">
<div class="cads-date-input__item"><label class="cads-form-field__label" for="forms_date_field_date_field_page_heading_1i">Year</label><input class="cads-input cads-input--4ch" name="forms_date_field[date_field_page_heading(1i)]" id="forms_date_field_date_field_page_heading_1i" inputmode="numeric"></div>
</div>
</div>
</fieldset>
</div>
</div>
</form>
<%= form_with model: Forms::DateField.new, url: "/" do |form| %>
<%= form.cads_date_field(:date_field_page_heading, page_heading: true) %>
<% end %>
Using with Rails
When using with Rails we recommend using the form builder method provided by CitizensAdviceComponents::FormBuilder.
<%= form_with model: @model, url: "/" do |form| %>
<%= form.cads_date_field(
:date_of_birth,
hint: "Example hint text",
required: true
) %>
<% 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):page_heading- Wraps the<legend>in a<h1>
View component version
We also provide an older view component version of the component
<%= render CitizensAdviceComponents::DateInput.new(name: "dob", label: "Date of birth") %>| Argument | Description |
|---|---|
Argument
name
|
Description Required, field name |
Argument
label
|
Description Required, the text for the label associated with the input |
Argument
errors
|
Description
Optional, an array of which fields should be hightlighted when an error message appears. Options are day, month and year.
|
Argument
values
|
Description Optional, placeholder values |
Argument
options
|
Description Optional, a hash with one or more of the following values: |
Argument
options[:page_heading]
|
Description → Optional, boolean indicating the field label is a page heading |
Argument
options[:hint]
|
Description → Optional, hint text for the input |
Argument
options[:error_message]
|
Description → Optional, an error message for the input |
Argument
options[:optional]
|
Description → Optional, boolean indicating the field is optional (ie not required) |
Questions and contributions
For National Citizens Advice staff you can find us in the #design-system channel on Slack. For open issues, roadmap, and source code see the GitHub project.