A month picker is a control that enables users to choose a month value.
Installation
<script type="module">
import '@nvidia-elements/core/month/define.js';
</script>
<nve-month>
<label>label</label>
<input type="month" />
<nve-control-message>message</nve-control-message>
</nve-month>
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 layout month inputs showing all validation states including disabled, success, and error. Use for stacked form layouts where labels appear above inputs.
<div nve-layout="column gap:lg full">
<nve-month>
<label>label</label>
<input type="month" />
<nve-control-message>message</nve-control-message>
</nve-month>
<nve-month>
<label>disabled</label>
<input type="month" disabled />
<nve-control-message>message</nve-control-message>
</nve-month>
<nve-month>
<label>success</label>
<input type="month" />
<nve-control-message status="success">message</nve-control-message>
</nve-month>
<nve-month>
<label>error</label>
<input type="month" />
<nve-control-message status="error">message</nve-control-message>
</nve-month>
</div>
Horizontal
Horizontal layout month inputs with side-by-side labels. Ideal for compact forms or when aligning labels with other horizontal form controls.
<div nve-layout="column gap:lg full">
<nve-month layout="horizontal">
<label>label</label>
<input type="month" />
<nve-control-message>message</nve-control-message>
</nve-month>
<nve-month layout="horizontal">
<label>disabled</label>
<input type="month" disabled />
<nve-control-message>message</nve-control-message>
</nve-month>
<nve-month layout="horizontal">
<label>success</label>
<input type="month" />
<nve-control-message status="success">message</nve-control-message>
</nve-month>
<nve-month layout="horizontal">
<label>error</label>
<input type="month" />
<nve-control-message status="error">message</nve-control-message>
</nve-month>
</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