A time picker is a control that enables users to choose a time value.
Installation
<script type="module">
import '@nvidia-elements/core/time/define.js';
</script>
<nve-time>
<label>label</label>
<input type="time" min="09:00" max="18:00" value="12:00" />
<nve-control-message>message</nve-control-message>
</nve-time>
<script type="module">
import '@nvidia-elements/core/time/define.js';
</script>
<nve-time>
<label>label</label>
<input type="time" min="09:00" max="18:00" value="12:00" />
<nve-control-message>message</nve-control-message>
</nve-time>
nve api.get nve-time
nve api.get nve-time
Datalist
Layout
Controls the directional arrangement and spacing behavior of the element's content.
Layout Description vertical Arranges content in a vertical stack with block-level spacing. vertical-inline Arranges content vertically with compact inline spacing for dense layouts. horizontal Arranges content in a horizontal row with block-level spacing. horizontal-inline Arranges content horizontally with compact inline spacing. Vertical
Vertical field layout showcasing default, disabled, success, and error states
<div nve-layout="column gap:lg full">
<nve-time>
<label>label</label>
<input type="time" />
<nve-control-message>message</nve-control-message>
</nve-time>
<nve-time>
<label>disabled</label>
<input type="time" disabled />
<nve-control-message>message</nve-control-message>
</nve-time>
<nve-time>
<label>success</label>
<input type="time" />
<nve-control-message status="success">message</nve-control-message>
</nve-time>
<nve-time>
<label>error</label>
<input type="time" />
<nve-control-message status="error">message</nve-control-message>
</nve-time>
</div>
<div nve-layout="column gap:lg full">
<nve-time>
<label>label</label>
<input type="time" />
<nve-control-message>message</nve-control-message>
</nve-time>
<nve-time>
<label>disabled</label>
<input type="time" disabled />
<nve-control-message>message</nve-control-message>
</nve-time>
<nve-time>
<label>success</label>
<input type="time" />
<nve-control-message status="success">message</nve-control-message>
</nve-time>
<nve-time>
<label>error</label>
<input type="time" />
<nve-control-message status="error">message</nve-control-message>
</nve-time>
</div>
Horizontal
Horizontal field layout with label beside input, showing default, disabled, success, and error states
<div nve-layout="column gap:lg full">
<nve-time layout="horizontal">
<label>label</label>
<input type="time" />
<nve-control-message>message</nve-control-message>
</nve-time>
<nve-time layout="horizontal">
<label>disabled</label>
<input type="time" disabled />
<nve-control-message>message</nve-control-message>
</nve-time>
<nve-time layout="horizontal">
<label>success</label>
<input type="time" />
<nve-control-message status="success">message</nve-control-message>
</nve-time>
<nve-time layout="horizontal">
<label>error</label>
<input type="time" />
<nve-control-message status="error">message</nve-control-message>
</nve-time>
</div>
<div nve-layout="column gap:lg full">
<nve-time layout="horizontal">
<label>label</label>
<input type="time" />
<nve-control-message>message</nve-control-message>
</nve-time>
<nve-time layout="horizontal">
<label>disabled</label>
<input type="time" disabled />
<nve-control-message>message</nve-control-message>
</nve-time>
<nve-time layout="horizontal">
<label>success</label>
<input type="time" />
<nve-control-message status="success">message</nve-control-message>
</nve-time>
<nve-time layout="horizontal">
<label>error</label>
<input type="time" />
<nve-control-message status="error">message</nve-control-message>
</nve-time>
</div>
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release Docs Preview API Documentation Fully Themeable
beta Robust unit test coverages Passed API Review Passed Designer VQA Review Included in library package stable No known outstanding AA WCAG issues No known outstanding performance issues Adapts to different screen/container sizes No breaking API changes for at least 90 days