Components
Field Search
An all-in-one search control pairing a leading field select with a value input — text fields filter on debounce, enum fields search on pick.
Installation
- $npx litefy@latest add field-search
- $pnpm dlx litefy@latest add field-search
- $yarn dlx litefy@latest add field-search
- $bun --bun litefy@latest add field-search
Usage
FieldSearch composes InputGroup + Select + Input into a single search control: the leading select picks which field to search, the rest is the value input. Text fields emit on debounce; enum fields render a second select and emit immediately on pick.
Name
Email
Status
Filtering where name = "*"
"use client";import * as React from "react";import { FieldSearch } from "@/ui";export default function Demo() { const [query, setQuery] = React.useState({ field: "name", value: "" }); return ( <div className="flex max-w-md flex-col gap-3"> <FieldSearch fields={[ { value: "name", label: "Name", placeholder: "Search by name" }, { value: "email", label: "Email", placeholder: "Search by email" }, { value: "status", label: "Status", options: [ { value: "active", label: "Active" }, { value: "archived", label: "Archived" }, ], }, ]} onSearch={(field, value) => setQuery({ field, value })} /> <p className="text-sm text-muted-foreground" aria-live="polite"> Filtering where{" "} <span className="text-foreground">{query.field}</span> = "{query.value || "*"}" </p> </div> );}No suggestion dropdown by design — the table itself is the result; pair it with Table and feed onSearch into your filtering.
API Reference
FieldSearch
| Prop | Type | Default | Description |
|---|---|---|---|
fields | FieldSearchField[] | - | Searchable fields; the first one is selected initially |
onSearch | (field: string, value: string) => void | - | Called with the field identifier and the trimmed value after debounce / on pick; duplicate consecutive emissions are skipped |
debounceMs | number | 300 | Debounce for text input emissions |
className | ClassNameValue | - | Custom classes, applied to the group shell |
FieldSearchField
| Property | Type | Default | Description |
|---|---|---|---|
value | string | - | Field identifier, passed through to onSearch |
label | string | - | Label shown in the field select |
placeholder | string | - | Text-mode placeholder |
options | FieldSearchOption[] | - | Enum mode: renders a select instead of a text input |
allLabel | string | "All" | Enum-mode empty option label |
FieldSearchOption
| Property | Type | Description |
|---|---|---|
label | string | Option label |
value | string | Option value |