Date

Help your users fill in dates that are required for your service.


General date format

Please enter your date of birth E.g 01 01 1990
<div class="field row is-mobile">
    <div class="col is-3-mobile is-2-desktop">
        <label class="label" for="dob-day">Day</label>
        <div class="control">
            <input
                class="input"
                type="text"
                id="bday-day"
                name="bday-day"
                autocomplete="bday-day"
                pattern="[0-9]"
                maxlength="2"
            />
        </div>
    </div>

    <div class="col is-3-mobile is-2-desktop">
        <label class="label" for="dob-month">Month</label>
        <div class="control">
            <input
                class="input"
                type="text"
                id="bday-month"
                name="bday-month"
                autocomplete="bday-month"
                pattern="[0-9]"
                maxlength="2"
            />
        </div>
    </div>

    <div class="col is-3-mobile is-3-desktop">
        <label class="label" for="dob-year">Year</label>
        <div class="control">
            <input
                class="input"
                type="text"
                id="bday-year"
                name="bday-year"
                autocomplete="bday-year"
                pattern="[0-9]"
                maxlength="4"
            />
        </div>
    </div>
</div>

When you should use this pattern

Use this pattern when you want to ask users for a specific date. E.g Their date of birth or when something was issued to them. However, there may be instances where you need users to select from a few specific dates, in this case, you may use the radio button component to display them.


Guidelines

Date format

Help users fill in dates for your services by:

  • Ensuring that you state clearly how the date should be filled in. E.g Day Month Year
  • Ensuring that you give a example of how the date should be filled. E.g 01 01 2020 vs 1 1 2020

Memorable dates

When asking for memorable dates such as date of birth, do ensure that:

  • The fields, in this example, should always have the autocomplete attribute for these 3 fields, bday-day, bday-month and bday-year to help your users complete it quickly.
  • You will need to include the autocomplete attribute to meet WCAG 2.1 AA for production.

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team