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

Day

Month

Year

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

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

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

---

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component