Progressive Filter Chip

<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>

Progressive filter chip with numeric text input for threshold-based filtering (greater than, less than).

<nve-progressive-filter-chip closable>
  <nve-select>
    <select aria-label="dataset">
      <option selected>memory</option>
      <option>CPU</option>
    </select>
  </nve-select>
  <nve-select>
    <select aria-label="condition">
      <option selected>greater than</option>
      <option>less than</option>
      <option>equal to</option>
    </select>
  </nve-select>
  <nve-input>
    <input type="number" min="0" max="100" value="50" aria-label="filter" />
  </nve-input>
</nve-progressive-filter-chip>

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>

Progressive filter chip with date picker inputs for filtering by date range criteria.

<nve-progressive-filter-chip>
  <nve-select>
    <select aria-label="date type">
      <option>recording date</option>
      <option>process date</option>
    </select>
  </nve-select>
  <nve-date>
    <input type="date" value="2022-05-11" aria-label="start date" />
  </nve-date>
  <nve-date>
    <input type="date" value="2022-12-07" aria-label="end date" />
  </nve-date>
</nve-progressive-filter-chip>

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>

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>

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>