Date input
Go to the installation documentation
<!-- Date input -->
<form id="date-inputs" class="coop-form" novalidate>
<h3>Date input</h3>
<div class="coop-form__row">
<fieldset id="dob-1" aria-describedby="dob-1-hint">
<legend class="coop-form__label">What is your date of birth?</legend>
<p id="dob-1-hint" class="coop-form__hint">For example 21 12 2020</p>
<p id="dob-1-error" class="coop-form__error" hidden></p>
<div class="coop-form__columns">
<div class="coop-form__column">
<label class="coop-form__label" for="dob-1-day">Day</label>
<input
id="dob-1-day"
type="text"
pattern="[0-9]*"
inputmode="numeric"
maxlength="2"
minlength="2"
autocomplete="bday-day"
class="coop-form__field coop-form__input coop-form__input--width-2"
>
</div>
<div class="coop-form__column">
<label class="coop-form__label" for="dob-1-month">Month</label>
<input
id="dob-1-month"
type="text"
pattern="[0-9]*"
inputmode="numeric"
maxlength="2"
minlength="2"
autocomplete="bday-month"
class="coop-form__field coop-form__input coop-form__input--width-2"
>
</div>
<div class="coop-form__column">
<label class="coop-form__label" for="dob-1-year">Year</label>
<input
id="dob-1-year"
type="text"
pattern="[0-9]*"
inputmode="numeric"
maxlength="4"
minlength="4"
autocomplete="bday-year"
class="coop-form__field coop-form__input coop-form__input--width-4"
>
</div>
</div>
</fieldset>
</div>
</form>
<!-- Date input with error message -->
<form id="date-inputs-error" class="coop-form" novalidate>
<h3>Date input with error message</h3>
<div class="coop-form__row">
<fieldset id="dob-2" aria-describedby="dob-2-hint dob-2-error">
<legend class="coop-form__label">What is your date of birth?</legend>
<p id="dob-2-hint" class="coop-form__hint">For example 21 12 2020</p>
<p id="dob-2-error" class="coop-form__error">Enter your date of birth</p>
<div class="coop-form__columns">
<div class="coop-form__column">
<label class="coop-form__label" for="dob-2-day">Day</label>
<input
id="dob-2-day"
type="text"
pattern="[0-9]*"
inputmode="numeric"
maxlength="2"
minlength="2"
autocomplete="bday-day"
class="coop-form__field coop-form__input coop-form__input--width-2 coop-form__invalid"
>
</div>
<div class="coop-form__column">
<label class="coop-form__label" for="dob-2-month">Month</label>
<input
id="dob-2-month"
type="text"
pattern="[0-9]*"
inputmode="numeric"
maxlength="2"
minlength="2"
autocomplete="bday-month"
class="coop-form__field coop-form__input coop-form__input--width-2 coop-form__invalid"
>
</div>
<div class="coop-form__column">
<label class="coop-form__label" for="dob-2-year">Year</label>
<input
id="dob-2-year"
type="text"
pattern="[0-9]*"
inputmode="numeric"
maxlength="4"
minlength="4"
autocomplete="bday-year"
class="coop-form__field coop-form__input coop-form__input--width-4 coop-form__invalid"
>
</div>
</div>
</fieldset>
</div>
</form>
<!-- Date input with error message (empty year) -->
<form id="date-inputs-error-year" class="coop-form" novalidate>
<h3>Date input with error message (empty year)</h3>
<div class="coop-form__row">
<fieldset id="dob-3" aria-describedby="dob-3-hint dob-3-error">
<legend class="coop-form__label">What is your date of birth?</legend>
<p id="dob-3-hint" class="coop-form__hint">For example 21 12 2020</p>
<p id="dob-3-error" class="coop-form__error">Enter your year of birth</p>
<div class="coop-form__columns">
<div class="coop-form__column">
<label class="coop-form__label" for="dob-3-day">Day</label>
<input
id="dob-3-day"
type="text"
pattern="[0-9]*"
inputmode="numeric"
maxlength="2"
minlength="2"
autocomplete="bday-day"
class="coop-form__field coop-form__input coop-form__input--width-2"
value="21"
>
</div>
<div class="coop-form__column">
<label class="coop-form__label" for="dob-3-month">Month</label>
<input
id="dob-3-month"
type="text"
pattern="[0-9]*"
inputmode="numeric"
maxlength="2"
minlength="2"
autocomplete="bday-month"
class="coop-form__field coop-form__input coop-form__input--width-2"
value="12"
>
</div>
<div class="coop-form__column">
<label class="coop-form__label" for="dob-3-year">Year</label>
<input
id="dob-3-year"
type="text"
pattern="[0-9]*"
inputmode="numeric"
maxlength="4"
minlength="4"
autocomplete="bday-year"
class="coop-form__field coop-form__input coop-form__input--width-4 coop-form__invalid"
>
</div>
</div>
</fieldset>
</div>
</form>