Number Field
Styled native number input -- no classes needed.
Default
<input type="number" pattern="[0-9]*" placeholder="0" />With suffix
Wrap the input and a suffix in a <label> and add
data-suffix to the adornment. Works with text, icons, or
buttons.
<label>
<svg data-prefix>...</svg>
<input type="number" pattern="[0-9]*" placeholder="0.00" />
<small data-suffix>USD</small>
</label>
<label>
<input type="number" pattern="[0-9]*" placeholder="0" />
<small data-suffix>kg</small>
</label>Constraints
Use the native min, max, and
step attributes to constrain the value.
<!-- integer 0-100 -->
<label>
<input
type="number"
pattern="[0-9]*"
min="0"
max="100"
step="1"
placeholder="0-100"
/>
<small data-suffix>%</small>
</label>
<!-- decimal with cent precision -->
<label>
<input
type="number"
pattern="[0-9]*"
min="0"
step="0.01"
placeholder="0.00"
/>
<small data-suffix>EUR</small>
</label>In a Field
Use div.field as the outer wrapper (instead of
label.field) when the inner <label>
handles adornments, to avoid nesting labels.
Price
Enter the total amount including tax.
<div class="field">
<span>Price</span>
<label style="width: 100%">
<svg data-prefix>...</svg>
<input
type="number"
pattern="[0-9]*"
placeholder="0.00"
min="0"
step="0.01"
/>
<small data-suffix>USD</small>
</label>
<small>Enter the total amount including tax.</small>
</div>