Date input

Adapted

Default

A default date input lets users enter a day, month and year.

What is your date of birth?

For example, 31 3 1980

Show code

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
    <legend class="govuk-fieldset__legend">What is your date of birth?</legend>
    <div class="govuk-hint" id="dob-hint">For example, 31 3 1980</div>
    <div class="govuk-date-input" id="dob">
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="dob-day">Day</label>
          <input
            class="govuk-input govuk-date-input__input govuk-input--width-2"
            type="text"
            inputmode="numeric"
            id="dob-day"
            name="day"
          >
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="dob-month">Month</label>
          <input
            class="govuk-input govuk-date-input__input govuk-input--width-2"
            type="text"
            inputmode="numeric"
            id="dob-month"
            name="month"
          >
        </div>
      </div>
      <div class="govuk-date-input__item">
        <div class="govuk-form-group">
          <label class="govuk-label govuk-date-input__label" for="dob-year">Year</label>
          <input
            class="govuk-input govuk-date-input__input govuk-input--width-4"
            type="text"
            inputmode="numeric"
            id="dob-year"
            name="year"
          >
        </div>
      </div>
    </div>
  </fieldset>
</div>

---
import { FormGroup, InputLabel, Hint, Fieldset, FieldsetLegend, DateInput, DateInputItem, DateInputField } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup>
  <Fieldset role="group" aria-describedby="dob-hint">
    <FieldsetLegend>What is your date of birth?</FieldsetLegend>
    <Hint id="dob-hint">For example, 31 3 1980</Hint>
    <DateInput id="dob">
      <DateInputItem>
        <FormGroup>
          <InputLabel for="dob-day" class="govuk-date-input__label">Day</InputLabel>
          <DateInputField id="dob-day" name="day" width={2} />
        </FormGroup>
      </DateInputItem>
      <DateInputItem>
        <FormGroup>
          <InputLabel for="dob-month" class="govuk-date-input__label">Month</InputLabel>
          <DateInputField id="dob-month" name="month" width={2} />
        </FormGroup>
      </DateInputItem>
      <DateInputItem>
        <FormGroup>
          <InputLabel for="dob-year" class="govuk-date-input__label">Year</InputLabel>
          <DateInputField id="dob-year" name="year" width={4} />
        </FormGroup>
      </DateInputItem>
    </DateInput>
  </Fieldset>
</FormGroup>

import { FormGroup, InputLabel, Hint, Fieldset, FieldsetLegend, DateInput, DateInputItem, DateInputField } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup>
      <Fieldset role="group" aria-describedby="dob-hint">
        <FieldsetLegend>What is your date of birth?</FieldsetLegend>
        <Hint id="dob-hint">For example, 31 3 1980</Hint>
        <DateInput id="dob">
          <DateInputItem>
            <FormGroup>
              <InputLabel htmlFor="dob-day" className="govuk-date-input__label">Day</InputLabel>
              <DateInputField id="dob-day" name="day" width={2} />
            </FormGroup>
          </DateInputItem>
          <DateInputItem>
            <FormGroup>
              <InputLabel htmlFor="dob-month" className="govuk-date-input__label">Month</InputLabel>
              <DateInputField id="dob-month" name="month" width={2} />
            </FormGroup>
          </DateInputItem>
          <DateInputItem>
            <FormGroup>
              <InputLabel htmlFor="dob-year" className="govuk-date-input__label">Year</InputLabel>
              <DateInputField id="dob-year" name="year" width={4} />
            </FormGroup>
          </DateInputItem>
        </DateInput>
      </Fieldset>
    </FormGroup>
  );
}

<script>
  import { FormGroup, InputLabel, Hint, Fieldset, FieldsetLegend, DateInput, DateInputItem, DateInputField } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup>
  <Fieldset role="group" aria-describedby="dob-hint">
    <FieldsetLegend>What is your date of birth?</FieldsetLegend>
    <Hint id="dob-hint">For example, 31 3 1980</Hint>
    <DateInput id="dob">
      <DateInputItem>
        <FormGroup>
          <InputLabel for="dob-day" class="govuk-date-input__label">Day</InputLabel>
          <DateInputField id="dob-day" name="day" width={2} />
        </FormGroup>
      </DateInputItem>
      <DateInputItem>
        <FormGroup>
          <InputLabel for="dob-month" class="govuk-date-input__label">Month</InputLabel>
          <DateInputField id="dob-month" name="month" width={2} />
        </FormGroup>
      </DateInputItem>
      <DateInputItem>
        <FormGroup>
          <InputLabel for="dob-year" class="govuk-date-input__label">Year</InputLabel>
          <DateInputField id="dob-year" name="year" width={4} />
        </FormGroup>
      </DateInputItem>
    </DateInput>
  </Fieldset>
</FormGroup>

import { FormGroup, InputLabel, Hint, Fieldset, FieldsetLegend, DateInput, DateInputItem, DateInputField } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup>
      <Fieldset role="group" aria-describedby="dob-hint">
        <FieldsetLegend>What is your date of birth?</FieldsetLegend>
        <Hint id="dob-hint">For example, 31 3 1980</Hint>
        <DateInput id="dob">
          <DateInputItem>
            <FormGroup>
              <InputLabel for="dob-day" class="govuk-date-input__label">Day</InputLabel>
              <DateInputField id="dob-day" name="day" width={2} />
            </FormGroup>
          </DateInputItem>
          <DateInputItem>
            <FormGroup>
              <InputLabel for="dob-month" class="govuk-date-input__label">Month</InputLabel>
              <DateInputField id="dob-month" name="month" width={2} />
            </FormGroup>
          </DateInputItem>
          <DateInputItem>
            <FormGroup>
              <InputLabel for="dob-year" class="govuk-date-input__label">Year</InputLabel>
              <DateInputField id="dob-year" name="year" width={4} />
            </FormGroup>
          </DateInputItem>
        </DateInput>
      </Fieldset>
    </FormGroup>
  );
}

When to use this component

Use the date input component when you’re asking users for a date they’ll already know, or can look up without using a calendar.

When not to use this component

Do not use the date input component if users are unlikely to know the exact date of the event you’re asking about.

Read more in the Ask users for dates pattern.