SearchField
A search field allows a user to enter and clear a search query.
Preview
Code
Examples
Disabled
Preview
Code
Read only
Preview
Code
With custom width
Preview
Code
With default value
Preview
Code
Props
Name | Type | Default |
|---|---|---|
isDisabled | boolean | — |
autoFocus | boolean | — |
onFocus | ((e: FocusEvent<HTMLInputElement, Element>) => void) | — |
onBlur | ((e: FocusEvent<HTMLInputElement, Element>) => void) | — |
onFocusChange | ((isFocused: boolean) => void) | — |
onKeyDown | ((e: KeyboardEvent) => void) | — |
onKeyUp | ((e: KeyboardEvent) => void) | — |
id | string | — |
type | (string & {}) | "search" | "text" | "tel" | "url" | "email" | "password" | — |
excludeFromTabOrder | boolean | — |
name | string | — |
value | string | — |
pattern | string | — |
defaultValue | string | — |
enterKeyHint | "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | — |
spellCheck | string | — |
autoCorrect | string | — |
inputMode | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | — |
onCopy | ClipboardEventHandler<HTMLInputElement> | — |
onCut | ClipboardEventHandler<HTMLInputElement> | — |
onPaste | ClipboardEventHandler<HTMLInputElement> | — |
onCompositionEnd | CompositionEventHandler<HTMLInputElement> | — |
onCompositionStart | CompositionEventHandler<HTMLInputElement> | — |
onCompositionUpdate | CompositionEventHandler<HTMLInputElement> | — |
onChange | ((value: string) => void) | — |
onBeforeInput | FormEventHandler<HTMLInputElement> | — |
onInput | FormEventHandler<HTMLInputElement> | — |
onSubmit | ((value: string) => void) | — |
onSelect | ReactEventHandler<HTMLInputElement> | — |
isReadOnly | boolean | — |
isRequired | boolean | — |
isInvalid | boolean | — |
validate | ((value: string) => true | ValidationError | null) | — |
minLength | number | — |
maxLength | number | — |
autoComplete | string | — |
onClear | (() => void) | — |
validationBehavior | "native" | "aria" | 'native' |
children | ReactNode | ((values: SearchFieldRenderProps & { defaultChildren: ReactNode; }) => ReactNode) | — |
className | string | ((values: SearchFieldRenderProps & { defaultClassName: string; }) => string) | — |
style | CSSProperties | ((values: SearchFieldRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties) | — |
slot | string | null | — |
ref | Ref<HTMLInputElement> | — |
key | Key | null | — |