Search field
A search box: a clear button, a global ⌘K / Ctrl+K shortcut, a debounced onSearch, Enter to submit, and suggestions with the keyboard.
Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.
When to use
- At the top of a list or a page to find by words: videos, creators, jobs, users.
- With
shortcutfor the site's global search, reachable from anywhere with ⌘K. - With
suggestionsfor recent searches or completions under the field.
When not to use
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { SearchField } from "@krizaka/ui/search-field";Examples
Global search
The site's search with its ⌘K shortcut, submitting to a results page.
Recent searches
Suggestions under the field, walked with the arrows.
sunset timelapseTag
Eric TremblayCreator
studio lighting2 days ago
In a toolbar
size="sm", filtering a list as you type.
- Flux 1.1
- Whisper large
- XTTS v2
- Llama 3.3
- Qwen 2.5
Props
A search box: clear, shortcut, debounced search, submit on Enter, suggestions with the keyboard.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | The accessible name of the input ("Search videos"), passed translated. |
clearLabel | string | Clear search | The clear button's name ("Clear search"), passed translated. |
debounce | number | 250 | The pause, in ms, before onSearch. Default 250. |
defaultValue | string | — | The query at first, uncontrolled. |
landmark | boolean | true | Wraps the field in a role="search" landmark (default) — false inside a form that already is one. |
onSearch | ((query: string) => void) | — | Called with the query once typing pauses (debounce ms): fetch the results here. |
onSubmit | ((query: string) => void) | — | Called on Enter (no suggestion active) with the query: go to the results page. |
onSuggestionSelect | ((suggestion: SearchSuggestion) => void) | — | Called with a suggestion picked (Enter on it, or a click). |
onValueChange | ((query: string) => void) | — | Called on every key with the query. |
shortcut | string | false | false | The global key that focuses the field with ⌘ / Ctrl ("k"), or false for none. Default false. |
size | "sm" | "md" | — | md (default) · sm. |
suggestions | readonly SearchSuggestion[] | — | Suggestions under the field (recent searches, completions). |
suggestionsLabel | string | — | A title above the suggestions ("Recent searches"). |
value | string | — | The query (controlled). |
Accessibility
- An
input type="search"named bylabel, inside asearchlandmark (landmark={false}inside a form that is one). - With suggestions it follows the combobox pattern (
aria-activedescendant, alistbox). - The clear button is named by
clearLabel; the shortcut's keys are decorative (aria-hidden).
Keyboard
| Keys | Action |
|---|---|
| ⌘ K / Ctrl K | Focus the field from anywhere (with shortcut="k"). |
| Enter | Submit the query, or pick the active suggestion. |
| Esc | Close the suggestions, then clear the query. |
| Arrow Down / Arrow Up | Move through the suggestions. |
Best practices
- Name it by what it searches (“Search videos”), and say it in the placeholder too.
- Fetch in
onSearch(debounced), navigate inonSubmit; keep the query in the address. - Show the shortcut only for the site's main search: one ⌘K per page.
Related components
Generated from the code of @krizaka/ui 2.4.0: its meta.ts, its examples and its types.Edit this documentation on GitHub