Search Field
Let people narrow a list, a table, or a help center as they type, and clear it in one keystroke.
Installation
You can add the search field using our CLI or manually:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add search-fieldUsing a shared UI package or custom import aliases? Configure your installation paths before running the CLI. Copy-paste examples use the default imports.
Shapes and sizes
It is a pill by default, like the search in BoardUI's tables. Set shape="rounded" to match Input in a form, and size="small" for toolbars. The clear button fades in once there is text.
<SearchField label="Pill" placeholder="Search" /><SearchField label="Rounded" shape="rounded" placeholder="Search" /><SearchField label="Pill, small" size="small" placeholder="Search" /><SearchField label="Rounded, small" size="small" shape="rounded" placeholder="Search" />Loading
While results are on their way, isLoading turns the search icon into Spinner's orbiting light, and turns it back when they land.
const [query, setQuery] = useState("");const { data, isFetching } = useArticles(query);
<SearchField label="Help center" placeholder="Search articles" value={query} onChange={setQuery} isLoading={isFetching}/>Right-to-left
Inside DirectionProvider, the icon and the clear button swap sides. Translate the clear button's name with clearLabel.
import { DirectionProvider } from "@/components/foundations/direction/direction";
<DirectionProvider locale="ar"> <SearchField label="البحث في الفريق" placeholder="ابحث بالاسم أو الدور" clearLabel="مسح البحث" /></DirectionProvider>Keyboard and accessibility
Escape clears the text and Enter calls onSubmit. The clear button stays out of the tab order, since Escape does its job from the keyboard. Give the field a label or an aria-label; without either, the placeholder names it.