A filter chip is a control that enables users to select many options from a set of choices.
<nve-progressive-filter-chip closable>
<nve-select>
<select aria-label="dataset">
<option>workload</option>
<option selected>instance</option>
</select>
</nve-select>
<nve-select>
<select aria-label="condition">
<option>sort by</option>
<option selected>filter by</option>
</select>
</nve-select>
<nve-select>
<select aria-label="filter">
<option selected>utilization</option>
<option>status</option>
</select>
</nve-select>
</nve-progressive-filter-chip>
workload
instance
sort by
filter by
utilization
status
Installation
<script type="module">
import '@nvidia-elements/core/progressive-filter-chip/define.js';
</script>
<nve-progressive-filter-chip closable>
<nve-select>
<select aria-label="dataset">
<option>workload</option>
<option selected>instance</option>
</select>
</nve-select>
<nve-select>
<select aria-label="condition">
<option>sort by</option>
<option selected>filter by</option>
</select>
</nve-select>
<nve-select>
<select aria-label="filter">
<option selected>utilization</option>
<option>status</option>
</select>
</nve-select>
</nve-progressive-filter-chip>
nve api.get nve-progressive-filter-chip
Text Input
Many
Progressive filter chip with multi-select dropdown for filtering by many values simultaneously.
<nve-progressive-filter-chip closable>
<nve-select>
<select aria-label="dataset">
<option selected>status</option>
<option>workload</option>
</select>
</nve-select>
<nve-select>
<select aria-label="condition">
<option selected>filter by</option>
<option>sort by</option>
</select>
</nve-select>
<nve-select>
<select multiple aria-label="filter">
<option selected>progress</option>
<option>pending</option>
<option>success</option>
<option>failed</option>
</select>
</nve-select>
</nve-progressive-filter-chip>
status
workload
filter by
sort by
progress
pending
success
failed
Date Range
Layer
Progressive filter chip with proper layer stacking within dropdown contexts.
<nve-progressive-filter-chip closable>
<nve-select>
<select aria-label="dataset">
<option>workload</option>
<option selected>instance</option>
</select>
</nve-select>
<nve-select>
<select aria-label="condition">
<option>sort by</option>
<option selected>filter by</option>
</select>
</nve-select>
<nve-select>
<select aria-label="filter">
<option selected>utilization</option>
<option>status</option>
</select>
</nve-select>
</nve-progressive-filter-chip>
workload
instance
sort by
filter by
utilization
status
Custom
Create custom filter chips by using the slot attribute. A nve-button works as a trigger for custom UI.
Progressive filter chip with custom button trigger opening a map coordinate picker dropdown.
<nve-progressive-filter-chip closable>
<nve-select>
<select aria-label="dataset">
<option>GPS</option>
<option selected>Cellular</option>
</select>
</nve-select>
<nve-select>
<select aria-label="condition">
<option>contains</option>
<option>excludes</option>
</select>
</nve-select>
<nve-button style="width: 190px" popovertarget="map-dropdown">37.3706254,-121.9671894</nve-button>
</nve-progressive-filter-chip>
<nve-dropdown id="map-dropdown">
<nve-input>
<nve-icon-button icon-name="map-pin" readonly></nve-icon-button>
<input value="37.3706254,-121.9671894" disabled aria-label="map coordinates" />
</nve-input>
<img src="static/images/test-map-2.webp" width="300px" alt="non-interactive demo map" />
</nve-dropdown>
Validation
Progressive filter chip with input validation states showing required field and error styling.
<div nve-layout="column gap:lg">
<nve-progressive-filter-chip closable>
<nve-input>
<input type="text" value="validation" required aria-label="validation" />
<nve-control-message error="valueMissing">required</nve-control-message>
</nve-input>
<nve-input>
<input type="text" aria-label="validation" />
</nve-input>
</nve-progressive-filter-chip>
<nve-progressive-filter-chip closable>
<nve-input status="error">
<input type="text" value="manual validation" formnovalidate aria-label="manual validation" />
</nve-input>
<nve-input>
<input type="text" aria-label="validation" />
</nve-input>
</nve-progressive-filter-chip>
</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