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.0/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.4.0/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.4.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.0/@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>