Time 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-time-input
โ
The z-time-input
is the main parameter used to render the time 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/css-components/base.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/TimeInput.css" />
Code
html
<!-- Default -->
<label z-time-input>
<span>Time input</span>
<input type="time" />
</label>
<label z-time-input="shaped">
<span>Time input</span>
<input type="time" />
</label>
<!-- With value -->
<label z-time-input>
<span>Time input</span>
<input type="time" value="04:20" />
</label>
<label z-time-input="shaped">
<span>Time input</span>
<input type="time" value="04:20" />
</label>
<!-- Disabled -->
<label z-time-input>
<span>Time input</span>
<input type="time" disabled />
</label>
<label z-time-input="shaped">
<span>Time input</span>
<input type="time" disabled />
</label>
<!-- Readonly -->
<label z-time-input>
<span>Time input</span>
<input type="time" readonly value="04:20" />
</label>
<label z-time-input="shaped">
<span>Time input</span>
<input type="time" readonly value="04:20" />
</label>
<!-- With help text -->
<label z-time-input>
<span>Time input</span>
<small>Help text</small>
<input type="time" />
</label>
<label z-time-input="shaped">
<span>Time input</span>
<small>Help text</small>
<input type="time" />
</label>
<!-- Invalid -->
<label z-time-input>
<span>Time input</span>
<small>Invalid input</small>
<input type="time" data-invalid />
</label>
<label z-time-input="shaped">
<span>Time input</span>
<small>Invalid input</small>
<input type="time" data-invalid />
</label>