Number Field

Styled native number input. No classes needed.

Composed of

Text Field: The input styling it builds on

Works with

Field: Wrapper for a label

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.

USD kg %

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

% EUR

<!-- 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 USD 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>

API reference

Type	Classes / attributes	What it does
Prefix	`[data-prefix]`	Places an adornment before the input
Suffix	`[data-suffix]`	Places an adornment after the input
Loading	`[aria-busy]`	Shows a spinner in the input