Filter Input (Pills)

Multi-select filter built on Mantine PillsInput + Combobox. Selected values render as pills inside the field; placeholder shows when empty. Used for 'Filter by rule group state' and 'Filter by rule health'.

Use pills for multi-select enumerations where the count is bounded (state, health, color).

DON'T

Use pills for free-text — free-text should use Search Input.

Design

empty

Filter by rule group state

Placeholder visible, no pills.

with-pills

firing ✕pending ✕

Selected values shown as removable pills.

Component reference (screenshots)

/alerts

/targets

/rules

/service-discovery

Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.

Implementation

<PillsInput>
  {selected.map(v => <Pill onRemove={() => remove(v)}>{v}</Pill>)}
  <PillsInput.Field />
</PillsInput>

Layout