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