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.

Number inputNumber input

Playground

Customization

HTML Examples

Imports

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

Code

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