Guidance
If you aren't providing a date picker widget, we recommend helping users avoid mistakes by providing separate inputs for year, month, and day.
Refer to our dates and time documentation for more information about formatting dates and time.
Date
HTML
<!-- Date -->
<fieldset class="gnb-date-field">
<legend>Date</legend>
<div class="gnb-label-input-pair">
<input class="year" inputmode="numeric" name="year" id="year" type="text" maxlength="4" />
<label for="year">Year</label>
</div>
<div class="gnb-label-input-pair">
<input class="month" inputmode="numeric" name="month" id="month" type="text" maxlength="2" />
<label for="month">Month</label>
</div>
<div class="gnb-label-input-pair">
<input class="day" inputmode="numeric" name="day" id="day" type="text" maxlength="2" />
<label for="day">Day</label>
</div>
</fieldset>