useSearchField

Provides the behavior and accessibility implementation for a search field.

Example

SearchField.tsx

SearchField.css

TextField.css

Form.css

Example

SearchField.tsx

SearchField.css

TextField.css

Form.css

import {SearchField} from './SearchField';

<SearchField label="Search" onSubmit={text => alert(text)} />

API

<SearchField>
  <Label />
  <Input />
  <Button />
  <Text slot="description" />
  <FieldError />
</SearchField>

useSearchFieldState(props: SearchFieldProps): SearchFieldState

useSearchField(
  props: AriaSearchFieldProps,
state: SearchFieldState,
inputRef: RefObject<HTMLInputElement | null>
): SearchFieldAria

Name	Type

`setValue(value: string): void`
Sets the value of the search field.

Name	Type	Default
`enterKeyHint`	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	Default: —
An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See MDN.
`type`	`'text' \| 'search' \| 'url' \| 'tel' \| 'email' \| 'password' \| string & {}`	Default: `'search'`
The type of input to render. See MDN.
`isDisabled`	`boolean`	Default: —
Whether the input is disabled.
`isReadOnly`	`boolean`	Default: —
Whether the input can be selected but not changed by the user.
`placeholder`	`string`	Default: —
Temporary text that occupies the text input when it is empty.
`inputMode`	`'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search'`	Default: —
Hints at the type of data that might be entered by the user while editing the element or its contents. See MDN.
`autoCorrect`	`string`	Default: —
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.
`spellCheck`	`string`	Default: —
An enumerated attribute that defines whether the element may be checked for spelling errors. See MDN.

`value`	`string`	Default: —
The current value (controlled).
`defaultValue`	`string`	Default: —
The default value (uncontrolled).
`onChange`	`(value: T) => void`	Default: —
Handler that is called when the value changes.

Name	Type
`labelProps`	`LabelHTMLAttributes<HTMLLabelElement>`
Props for the text field's visible label element (if any).
`inputProps`	`InputHTMLAttributes<HTMLInputElement>`
Props for the input element.
`clearButtonProps`	`AriaButtonProps`
Props for the clear button.
`descriptionProps`	`DOMAttributes`
Props for the searchfield's description element, if any.
`errorMessageProps`	`DOMAttributes`
Props for the searchfield's error message element, if any.
`validationDetails`	`ValidityState`
The native validation details for the input.