forms / stable

SearchField

Search input with a leading magnifier and a clear button; Escape clears, Enter submits.

LIVE PREVIEW

Loading preview…

When to use

Filtering a list or table in place.
Searching within a module.

Consider an alternative

Picking one record from a set — use ComboBox.
Global search — use the ⌘K command menu.

Import

import { SearchField } from '@revido-llc/kit';

Keyboard interaction

Escape — clear
Enter — submit

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


className	string	—	Classes for the root (label + control + help).
controlClassName	string	—	Classes for the bordered control.
description	ReactNode	—	One short sentence of help under the control.
errorMessage	string \| ((validation: ValidationResult) => string)	—	Error text shown while the field is invalid (or a function of the validation result).
label	ReactNode	—	Visible label. Omit only when an `aria-label` names the field.
placeholder	string	"Search"
size	FieldSize	"md"	`md` 32px (default) or `compact` 28px for toolbars.
autoComplete	string	—	Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
autoCorrect	string	—	An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete).
autoFocus	boolean	—	Whether the element should receive focus on render.
defaultValue	string	—	The default value (uncontrolled).
enterKeyHint	"enter" \| "done" \| "go" \| "next" \| "previous" \| "search" \| "send"	—	An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).
form	string	—	The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
inputMode	"none" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal" \| "search"	—	Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).
isDisabled	boolean	—	Whether the input is disabled.
isInvalid	boolean	—	Whether the input value is invalid.
isReadOnly	boolean	—	Whether the input can be selected but not changed by the user.
isRequired	boolean	—	Whether user input is required on the input before form submission.
maxLength	number	—	The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength).
minLength	number	—	The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength).
name	string	—	The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
onChange	((value: string) => void)	—	Handler that is called when the value changes.
pattern	string	—	Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern).
render	DOMRenderFunction<"div", SearchFieldRenderProps>	—	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
spellCheck	string	—	An enumerated attribute that defines whether the element may be checked for spelling errors. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).
type	"text" \| "search" \| "url" \| "tel" \| "email" \| "password" \| (string & {})	'search'	The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).
validate	((value: string) => ValidationError \| true)	—	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
validationBehavior	"native" \| "aria"	'native'	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
value	string	—	The current value (controlled).

Examples

Toolbar filter

<SearchField aria-label="Search tasks" placeholder="Search tasks" value={query} onChange={setQuery} />

Sizes

<SearchField aria-label="Search" size="compact" />

With label

<SearchField label="Find a client" description="Name, email or KvK number." />