A search field that turns key:value syntax into colored filter tokens, suggesting filter names and then their values as you type. Prefix with a minus to exclude, click a token to edit it, and press Backspace twice to remove the last one.
npx shadcn@latest add https://hyperblur.dev/r/input-search-filters.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/input-search-filters.tsx.
import { InputSearchFilters } from "@/components/hyperblur/input-search-filters"
<InputSearchFilters resultCount={128} onChange={({ text, tokens }) => search(text, tokens)} />| Prop | Type | Default | Description |
|---|---|---|---|
| filters | { key: string; label: string; values: string[]; color?: string }[] | status, assignee, label, priority, updated | Filter keys and their allowed values. |
| defaultTokens | { key: string; value: string; negate?: boolean }[] | [] | Tokens on first render. |
| defaultText | string | "" | Text in the input on first render. |
| placeholder | string | "Search issues or type status:" | Placeholder while there are no tokens. |
| onChange | (value: { text: string; tokens: InputSearchToken[] }) => void | Called when the text or the tokens change. | |
| onSubmit | (value: { text: string; tokens: InputSearchToken[] }) => void | Called on Enter when no suggestion is being chosen. | |
| resultCount | number | Shows a result count inside the field. | |
| defaultOpen | boolean | false | Open the suggestions on first render. |
| embedded | boolean | false | Render suggestions in the page flow instead of floating. |
| accent | string | "#2f7bff" | Focus ring and caret color. |