Alpha

This is an alpha release of our documentation site. View the roadmap.

Date input

On this page

A date input field allows the user to enter a date they remember.

Examples

Default

Open example in a new tab
Date of birth 
<div class="cads-form-field">
  <div class="cads-form-field__content">
    <fieldset class="cads-form-group">
      <legend class="cads-form-field__label">
        Date of birth
      </legend>
      <div class="cads-date-input">
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="dob-day-label" for="dob-day">
            Day
          </label>            <input class="cads-input cads-input--2ch " name="dob-day" id="dob-day" inputmode="numeric" aria-invalid="false" data-testid="day-input">
        </div>
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="dob-month-label" for="dob-month">
            Month
          </label>            <input class="cads-input cads-input--2ch " name="dob-month" id="dob-month" inputmode="numeric" aria-invalid="false" data-testid="month-input">
        </div>
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="dob-year-label" for="dob-year">
            Year
          </label>            <input class="cads-input cads-input--4ch " name="dob-year" id="dob-year" inputmode="numeric" aria-invalid="false" data-testid="year-input">
        </div>
      </div>
    </fieldset>
  </div>
</div>
<%= render CitizensAdviceComponents::DateInput.new(name: "dob", label: "Date of birth") %>

Optional

Open example in a new tab
Date of birth (optional) 
<div class="cads-form-field">
  <div class="cads-form-field__content">
    <fieldset class="cads-form-group">
      <legend class="cads-form-field__label">
        Date of birth
        <span class="cads-form-field__optional">(optional)</span>
      </legend>
      <div class="cads-date-input">
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-day-label" for="bday-day">
            Day
          </label>            <input class="cads-input cads-input--2ch " name="bday-day" id="bday-day" inputmode="numeric" aria-invalid="false" data-testid="day-input">
        </div>
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-month-label" for="bday-month">
            Month
          </label>            <input class="cads-input cads-input--2ch " name="bday-month" id="bday-month" inputmode="numeric" aria-invalid="false" data-testid="month-input">
        </div>
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-year-label" for="bday-year">
            Year
          </label>            <input class="cads-input cads-input--4ch " name="bday-year" id="bday-year" inputmode="numeric" aria-invalid="false" data-testid="year-input">
        </div>
      </div>
    </fieldset>
  </div>
</div>
<%= render CitizensAdviceComponents::DateInput.new(
     name: "bday",
     label: "Date of birth",
     options: {
       optional: true
     }
   ) %>

With hint

Open example in a new tab
Date of birth

Enter your date of birth, like 01 02 1990

<div class="cads-form-field">
  <div class="cads-form-field__content">
    <fieldset class="cads-form-group">
      <legend class="cads-form-field__label">
        Date of birth
      </legend>
      <p class="cads-form-field__hint">Enter your date of birth, like 01 02 1990</p>
      <div class="cads-date-input">
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-day-label" for="bday-day">
            Day
          </label>            <input class="cads-input cads-input--2ch " name="bday-day" id="bday-day" inputmode="numeric" aria-invalid="false" data-testid="day-input">
        </div>
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-month-label" for="bday-month">
            Month
          </label>            <input class="cads-input cads-input--2ch " name="bday-month" id="bday-month" inputmode="numeric" aria-invalid="false" data-testid="month-input">
        </div>
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-year-label" for="bday-year">
            Year
          </label>            <input class="cads-input cads-input--4ch " name="bday-year" id="bday-year" inputmode="numeric" aria-invalid="false" data-testid="year-input">
        </div>
      </div>
    </fieldset>
  </div>
</div>
<%= render CitizensAdviceComponents::DateInput.new(
      name: "bday",
      label: "Date of birth",
      options: {
        hint: "Enter your date of birth, like 01 02 1990"
      }
    ) %>

With error message

Open example in a new tab
Date of birth

Enter your date of birth, like 01 02 1990

<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">
      <legend class="cads-form-field__label">
        Date of birth
      </legend>
      <p class="cads-form-field__error-message">Enter your date of birth, like 01 02 1990</p>
      <div class="cads-date-input">
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-day-label" for="bday-day">
            Day
          </label>            <input class="cads-input cads-input--2ch cads-input--error" name="bday-day" id="bday-day" inputmode="numeric" aria-invalid="true" data-testid="day-input">
        </div>
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-month-label" for="bday-month">
            Month
          </label>            <input class="cads-input cads-input--2ch cads-input--error" name="bday-month" id="bday-month" inputmode="numeric" aria-invalid="true" data-testid="month-input">
        </div>
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-year-label" for="bday-year">
            Year
          </label>            <input class="cads-input cads-input--4ch cads-input--error" name="bday-year" id="bday-year" inputmode="numeric" aria-invalid="true" data-testid="year-input">
        </div>
      </div>
    </fieldset>
  </div>
</div>
<%= render CitizensAdviceComponents::DateInput.new(
      name: "bday",
      label: "Date of birth",
      errors: %i[day month year],
      options: {
        error_message: "Enter your date of birth, like 01 02 1990"
      }
    ) %>

With incomplete error

Open example in a new tab
Date of birth

Date of birth must include a year

<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">
      <legend class="cads-form-field__label">
        Date of birth
      </legend>
      <p class="cads-form-field__error-message">Date of birth must include a year</p>
      <div class="cads-date-input">
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-day-label" for="bday-day">
            Day
          </label>            <input class="cads-input cads-input--2ch " name="bday-day" id="bday-day" inputmode="numeric" value="1" aria-invalid="false" data-testid="day-input">
        </div>
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-month-label" for="bday-month">
            Month
          </label>            <input class="cads-input cads-input--2ch " name="bday-month" id="bday-month" inputmode="numeric" value="1" aria-invalid="false" data-testid="month-input">
        </div>
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-year-label" for="bday-year">
            Year
          </label>            <input class="cads-input cads-input--4ch cads-input--error" name="bday-year" id="bday-year" inputmode="numeric" aria-invalid="true" data-testid="year-input">
        </div>
      </div>
    </fieldset>
  </div>
</div>
<%= render CitizensAdviceComponents::DateInput.new(
      name: "bday",
      label: "Date of birth",
      errors: %i[year],
      values: {
        day: 1,
        month: 1
      },
      options: {
        error_message: "Date of birth must include a year"
      }
    ) %>

With validation error

Open example in a new tab
Date of birth

Date of birth must be a real date

<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">
      <legend class="cads-form-field__label">
        Date of birth
      </legend>
      <p class="cads-form-field__error-message">Date of birth must be a real date</p>
      <div class="cads-date-input">
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-day-label" for="bday-day">
            Day
          </label>            <input class="cads-input cads-input--2ch cads-input--error" name="bday-day" id="bday-day" inputmode="numeric" value="99" aria-invalid="true" data-testid="day-input">
        </div>
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-month-label" for="bday-month">
            Month
          </label>            <input class="cads-input cads-input--2ch " name="bday-month" id="bday-month" inputmode="numeric" value="1" aria-invalid="false" data-testid="month-input">
        </div>
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-year-label" for="bday-year">
            Year
          </label>            <input class="cads-input cads-input--4ch " name="bday-year" id="bday-year" inputmode="numeric" value="1990" aria-invalid="false" data-testid="year-input">
        </div>
      </div>
    </fieldset>
  </div>
</div>
<%= render CitizensAdviceComponents::DateInput.new(
      name: "bday",
      label: "Date of birth",
      errors: %i[day],
      values: {
        day: 99,
        month: 1,
        year: 1990
      },
      options: {
        error_message: "Date of birth must be a real date"
      }
    ) %>

With values

Open example in a new tab
Date of birth 
<div class="cads-form-field">
  <div class="cads-form-field__content">
    <fieldset class="cads-form-group">
      <legend class="cads-form-field__label">
        Date of birth
      </legend>
      <div class="cads-date-input">
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-day-label" for="bday-day">
            Day
          </label>            <input class="cads-input cads-input--2ch " name="bday-day" id="bday-day" inputmode="numeric" value="1" aria-invalid="false" data-testid="day-input">
        </div>
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-month-label" for="bday-month">
            Month
          </label>            <input class="cads-input cads-input--2ch " name="bday-month" id="bday-month" inputmode="numeric" value="1" aria-invalid="false" data-testid="month-input">
        </div>
        <div class="cads-date-input__item">
          <label class="cads-form-field__label" id="bday-year-label" for="bday-year">
            Year
          </label>            <input class="cads-input cads-input--4ch " name="bday-year" id="bday-year" inputmode="numeric" value="1990" aria-invalid="false" data-testid="year-input">
        </div>
      </div>
    </fieldset>
  </div>
</div>
<%= render CitizensAdviceComponents::DateInput.new(
      name: "bday",
      label: "Date of birth",
      values: {
        day: 1,
        month: 1,
        year: 1990
      }
    ) %>

Using with Rails

If you are using the citizens_advice_components gem, you can call the component from within a template using:

<%= render CitizensAdviceComponents::DateInput.new(name: "dob", label: "Date of birth") %>

Component arguments

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 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)