FilterBar

"use client"

import { useState } from "react"
import { FilterBar, type FilterChip } from "@/registry/warren/filter-bar/filter-bar"

export default function FilterBarDemo() {
  const [chips, setChips] = useState<FilterChip[]>([
    { key: "service", op: "=", value: "api-prod" },
    { key: "level", op: "!=", value: "debug", tone: "danger" },
    { key: "latency_ms", op: ">", value: "250", tone: "warning" },
  ])
  const [raw, setRaw] = useState('{service="api-prod"}')

  return (
    <div className="w-full max-w-xl border-2 border-border bg-panel p-2">
      <FilterBar
        chips={chips}
        onChange={setChips}
        suggestions={{
          service: ["api-prod", "edge-eu", "worker"],
          level: ["info", "warn", "error"],
          region: ["eu-central", "us-east"],
        }}
        rawValue={raw}
        onRawChange={setRaw}
        placeholder="ADD FILTER"
      />
    </div>
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/filter-bar.json

Usage

import { FilterBar } from "@/components/ui/filter-bar"

<FilterBar
  chips={[
    { key: "service", op: "=", value: "api-prod" },
    { key: "level", op: "!=", value: "debug" },
  ]}
  onChange={setChips}
/>

Structure

The shared narrowing primitive for logs, metrics, and traces. Each chip is a square-bordered box: the field key as a 10px mono uppercase caps label, the operator glyph in signal ink (primary by default, per-chip tone override), and the value in mono tabular text. Removal is a bare × button with a full Remove filter key op value accessible name.

The trailing input slot commits free-text key op value expressions on Enter — parseFilter() in parse.ts accepts = != > < ~ and returns null for malformed input rather than guessing. Nothing is committed silently.

Suggestions

Pass suggestions as a record of chip key → allowed values. Candidates are flattened to key=value strings, filtered case-insensitively against the draft (substring, key order, capped at 8) and offered in a listbox with full combobox semantics: aria-expanded, aria-activedescendant, ArrowUp/ArrowDown to move, Enter to commit the active candidate, Escape to clear.

Raw query escape hatch

Supply both rawValue and onRawChange to reveal the RAW toggle. Toggling binds the same input slot to the raw query string (PromQL, SQL, whatever the console speaks) — chips and raw mode never mix: raw input never commits chips, and the suggestion listbox is suppressed while raw.

API Reference