Visually combines many related input controls into a unified composite field with shared styling.
<nve-input-group>
<label>domain</label>
<nve-select style="width: 130px">
<select aria-label="protocol">
<option>https://</option>
<option>http://</option>
</select>
</nve-select>
<nve-input>
<input placeholder="example" type="url" aria-label="host" />
<nve-button container="flat" readonly>.com</nve-button>
</nve-input>
<nve-control-message>host: 123456</nve-control-message>
</nve-input-group>
Installation
import '@nvidia-elements/core/input/define.js';
<nve-input-group>
<label>domain</label>
<nve-select style="width: 130px">
<select aria-label="protocol">
<option>https://</option>
<option>http://</option>
</select>
</nve-select>
<nve-input>
<input placeholder="example" type="url" aria-label="host" />
<nve-button container="flat" readonly="">.com</nve-button>
</nve-input>
<nve-control-message>host: 123456</nve-control-message>
</nve-input-group>
Range Group
Input group with date range filters combining select and date inputs for filtering data by time periods.
<div nve-layout="row align:vertical-center">
<nve-input-group>
<nve-select style="width: 150px">
<select aria-label="date type">
<option value="1">recording date</option>
<option value="2">process date</option>
</select>
</nve-select>
<nve-date style="width: 220px">
<nve-button container="flat" readonly>start</nve-button>
<input type="date" value="2022-05-11" aria-label="start date" />
</nve-date>
<nve-date style="width: 220px">
<nve-button container="flat" readonly>end</nve-button>
<input type="date" value="2022-12-07" aria-label="end date" />
</nve-date>
<nve-icon-button aria-label="remove filter" icon-name="cancel"></nve-icon-button>
</nve-input-group>
</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