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.

Time inputTime input

Playground

Customization

HTML Examples

Imports

<script type="module" src="/0.3.7/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/TimeInput.css" />

Code

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