DefaultLayerMultipleTextInputDateRangeCustomValidation
<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>
Edit Example
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>
Edit Example
Progressive filter chip with proper layer stacking within dropdown contexts.
<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>
Edit Example
Progressive filter chip with multi-select dropdown for filtering by many values simultaneously.
Progressive filter chip with numeric text input for threshold-based filtering (greater than, less than).
Progressive filter chip with date picker inputs for filtering by date range criteria.
<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>
Edit Example
Progressive filter chip with custom button trigger opening a map coordinate picker dropdown.
<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>
Edit Example
Progressive filter chip with input validation states showing required field and error styling.
