SearchField
The <SearchField>
component offers a user-friendly input field specifically designed for search queries, often accompanied by a search icon or button to initiate the search action.
Anatomy
A <SearchField>
consists of an input element, a label, and an optional clear button.

Appearance
The appearance of a component can be customized using the variant
and size
props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
Property | Type | Description |
---|---|---|
variant | - | The available variants of this component. |
size | - | The available sizes of this component. |
Usage
The <SearchField>
component is a versatile UI element that enables users to search for specific information within a given context or data set.
Placement
The placement of a search field plays a critical role in its effectiveness and usability. A well-positioned search field ensures users can easily find and use it, enhancing their overall experience on a website or application.


Don’t place the search field in an obscure location.
Props
action?
ReactElement<any, string | JSXElementConstructor<any>>;
aria-activedescendant?
string;
aria-autocomplete?
"none" | "inline" | "list" | "both";
aria-controls?
string;
aria-describedby?
string;
aria-details?
string;
aria-errormessage?
string;
aria-haspopup?
boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog";
aria-label?
string;
aria-labelledby?
string;
autoComplete?
string;
autoCorrect?
string;
autoFocus?
boolean;
defaultValue?
string;
"none"
description?
ReactNode;
disabled?
boolean;
true
, the input is disabled."false"
enterKeyHint?
"enter" | "done" | "go" | "next" | "previous" | "search" | "send";
error?
boolean;
true
, the input is considered invalid and if set the errorMessage
is shown instead of the description
."false"
errorMessage?
ReactNode | ((v: ValidationResult) => ReactNode);
excludeFromTabOrder?
boolean;
id?
string;
inputMode?
"search" | "none" | "text" | "url" | "tel" | "email" | "numeric" | "decimal";
label?
ReactNode;
maxLength?
number;
minLength?
number;
name?
string;
onBeforeInput?
FormEventHandler<HTMLInputElement>;
onBlur?
(e: FocusEvent<HTMLInputElement, Element>) => void;
onChange?
(value: string) => void;
onClear?
() => void;
onCompositionEnd?
CompositionEventHandler<HTMLInputElement>;
onCompositionStart?
CompositionEventHandler<HTMLInputElement>;
onCompositionUpdate?
CompositionEventHandler<HTMLInputElement>;
onCopy?
ClipboardEventHandler<HTMLInputElement>;
onCut?
ClipboardEventHandler<HTMLInputElement>;
onFocus?
(e: FocusEvent<HTMLInputElement, Element>) => void;
onFocusChange?
(isFocused: boolean) => void;
onInput?
FormEventHandler<HTMLInputElement>;
onKeyDown?
(e: KeyboardEvent) => void;
onKeyUp?
(e: KeyboardEvent) => void;
onPaste?
ClipboardEventHandler<HTMLInputElement>;
onSelect?
ReactEventHandler<HTMLInputElement>;
onSubmit?
(value: string) => void;
pattern?
string;
placeholder?
string;
"none"
readOnly?
boolean;
true
, the input is readOnly."false"
ref?
Ref<HTMLInputElement>;
ref.current
to null
(or call the ref with null
if you passed a callback ref).
@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}required?
boolean;
true
, the input is required."false"
slot?
string | null;
null
value indicates that the local props completely override all props received from a parent.spellCheck?
string;
type?
"search" | "text" | "url" | "tel" | "email" | "password" | (string & {});
validate?
(value: string) => true | ValidationError | null;
validationBehavior="native"
. For realtime validation, use the isInvalid
prop instead.validationBehavior?
"native" | "aria";
'native'
value?
string;
"none"
width?
WidthProp;
"full"