Filter Chips

#Installation & usage

Use filter chips where filters also read as text: a log search, an order list, an issue tracker. Each filter is a chip like priority:in(p1,p2), people who think in queries can type them, and the chips can mirror controls elsewhere on the page. For free-form values that aren't a query (topics, email domains), use a Tag Input.

import { Field, FieldLabel, FilterChips } from '@youj/react'

export function IssueSearch() {
  const [query, setQuery] = useState(['priority:in(p1,p2)'])
  return (
    <Field>
      <FieldLabel>Issues</FieldLabel>
      <FilterChips
        value={query}
        onValueChange={setQuery}
        validate={(token) => (/^[a-z]+:\S/.test(token) ? undefined : 'Write a filter as field:value.')}
      />
    </Field>
  )
}

A token ends at a space, never inside brackets or quotes, so priority:in(p1, p2) stays whole. A finished field:value becomes a chip as you type the space after it, and Enter adds whatever is typed. A pasted query adds each of its tokens. Click a chip, or focus it and press Enter, and its text returns to the field to edit.

validate gets the new token and the current list, and returns a reason to refuse it. A refused token stays in the field: the frame shakes, the border turns destructive, and the reason grows in under it and is read out. A duplicate isn't added; the chip that already holds it flashes.

#Description

#Code