Skip to content

Number input - CSS Component โ€‹

...

Attention!

The localization format of the input comes from the format settings of the client's operation system.

Browser support โ€‹

Construction โ€‹

Common API

For the basics, check the common specifications.

The CSS component uses the <label> tag.

z-number-input โ€‹

The z-number-input is the main parameter used to render the number input component.

Playground โ€‹

Customization โ€‹

HTML Examples โ€‹

Imports
html
<script type="module" src="/0.4.3/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.4.3/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/NumberInput.css" />
Code
html

<!-- Default -->
<label z-number-input>
  <span>Number input</span>
  <input type="number" />
</label>
<label z-number-input="shaped">
  <span>Number input</span>
  <input type="number" />
</label>

<!-- with value -->
<label z-number-input>
  <span>Number input</span>
  <input type="number" value="-12.34" />
</label>
<label z-number-input="shaped">
  <span>Number input</span>
  <input type="number" value="-12.34" />
</label>

<!-- disabled -->
<label z-number-input>
  <span>Number input</span>
  <input type="number" disabled />
</label>
<label z-number-input="shaped">
  <span>Number input</span>
  <input type="number" disabled />
</label>

<!-- readonly -->
<label z-number-input>
  <span>Number input</span>
  <input type="number" readonly value="-12.34" />
</label>
<label z-number-input="shaped">
  <span>Number input</span>
  <input type="number" readonly value="-12.34" />
</label>

<!-- with help text -->
<label z-number-input>
  <span>Number input</span>
  <small>Help text</small>
  <input type="number" />
</label>
<label z-number-input="shaped">
  <span>Number input</span>
  <small>Help text</small>
  <input type="number" />
</label>

<!-- invalid -->
<label z-number-input>
  <span>Number input</span>
  <small>Invalid input</small>
  <input type="number" data-invalid />
</label>
<label z-number-input="shaped">
  <span>Number input</span>
  <small>Invalid input</small>
  <input type="number" data-invalid />
</label>