Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA search box that understands operators like from:ada or is:unread, suggests operator names and their values as you type, turns finished operators into removable chips and keeps the rest as free text. Use this when power users filter with a query language.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for mail, issue and log search, where people type fast with operators but beginners need to discover them and see what the box understood.
Do not use it when filters are chosen from menus only. Use faceted filters.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
operators | { name, label?, values?: string[] }[] | 5 mail operators | What the box understands. Without values any value is accepted. |
value | { text: string; filters: { op, value }[] } | - | The parsed query (controlled). |
defaultValue | { text, filters } | empty | Initial query. |
onValueChange | (query) => void | - | Runs on every change. |
onSubmit | (query) => void | - | Runs on Enter when no suggestion is open. |
combobox with a listbox of operator names or values and aria-activedescendant.list of listitems; each has a Remove button named after it, and Delete on a focused chip removes it.parseQuery is exported and handles pasted queries (from:ada is:unread invoice) the same way as typed ones.2 filters and text “invoice”.The pattern ships with a Testing Library test (search-operator-token-input.test.tsx) that covers operator and value suggestions, chip creation, Backspace turning a chip back into text and parsing a pasted query.