Time input - CSS Component

...

Attention!

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

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

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.4.4/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.4.4/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.4/@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>