Date

Date input

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.

Note: If you need users to select from a few specific dates, we recommend that you use the radio button component to allow them to choose easily.


Usage

Below you will find a General Date Format you can use, along with the code needed to build this element.

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>

Guidelines

When you require users to fill in dates for your services

  • State clearly how the data should be filled (e.g. Day Month Year)
  • Give an example of how the date should be filled in (e.g. 01 01 2020 vs 1 1 2020)

When you request users to fill in memorable dates

  • For example, asking for Date-Of-Birth means you should always have the autocomplete attribute for these 3 fields, bday-day, bday-month and bday-year to bring convenience to users.
  • 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