Back to components
Number input
Contents
input mode fields
Example
HTML Snippet for input mode number
<form>
<div class="form-group">
<label class="form-label form-label-bold" for="card-number">Card number</label>
<input id="card-number" class="form-control" type="text" inputmode="numeric" pattern="[0-9]*" spellcheck="false" name="card-number">
</div>
</form>
Example
HTML Snippet for input mode number
<form>
<fieldset>
<legend>
<span class="form-label-bold">What is your date of birth?</span>
<span class="form-hint">For example, 31 3 1980</span>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label" for="dob-day">Day</label>
<input class="form-control" id="dob-day" name="dob-day" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
</div>
<div class="form-group form-group-month">
<label class="form-label" for="dob-month">Month</label>
<input class="form-control" id="dob-month" name="dob-month" type="text" inputmode="numeric" pattern="[0-9]*" minlength="1" maxlength="2">
</div>
<div class="form-group form-group-year">
<label class="form-label" for="dob-year">Year</label>
<input class="form-control" id="dob-year" name="dob-year" type="text" inputmode="numeric" pattern="[0-9]*" minlength="4" maxlength="4">
</div>
</div>
</fieldset>
</form>