## Import

```jsx
import { SearchInput } from "@cfa/react-core";
```

## Live Editor

```jsx
<SearchInput label="Search" />
```

## Examples

### Default

```jsx
<SearchInput label="Search" />
```

### With Placeholder

```jsx
<SearchInput label="Search" placeholder="Enter Search Terms" />
```

### With Description

Use the `description` prop to provide additional context below the input.

```jsx
<SearchInput
  label="Search Products"
  description="Enter a product name or SKU number"
  placeholder="Search..."
/>
```

### Compact

Use the `compact` prop for a smaller variant of the SearchInput.

```jsx
<SearchInput label="Compact" compact />
```

### Controlled

Use the `value` or `defaultValue` prop to set the text value, and `onChange` to handle user input.

```jsx
function ControlledExample() {
  let [value, setValue] = React.useState("");

  return (
    <>
      <SearchInput
        label="Controlled Search"
        placeholder="Type to search..."
        value={value}
        onChange={setValue}
      />
      <p>Search query: {value || "Empty"}</p>
    </>
  );
}
```

### States

```jsx
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
  <SearchInput label="Disabled" isDisabled />

  <SearchInput label="Read Only" isReadOnly value="Read only value" />

  <SearchInput label="Success" isSuccess value="Valid input" />
</div>
```

## Props

### SearchInput

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| compact | `boolean` | - | - |
| description | `string` | - | - |
| errorMessage | `string \ | ((validation: ValidationResult) => string)` | - | - |
| isSuccess | `boolean` | - | - |
| label | `string` | - | - |
| placeholder | `string` | - | - |
| ref | `Ref<HTMLInputElement>` | - | Requires React 19 |
| aria-activedescendant | `string` | - | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |
| aria-autocomplete | `"none" \ | "inline" \ | "list" \ | "both"` | - | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be&#xA;presented if they are made. |
| aria-controls | `string` | - | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-errormessage | `string` | - | Identifies the element that provides an error message for the object. |
| aria-haspopup | `boolean \ | "false" \ | "true" \ | "menu" \ | "listbox" \ | "tree" \ | "grid" \ | "dialog"` | - | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| 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. |
| children | `ChildrenOrFunction<SearchFieldRenderProps>` | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | `ClassNameOrFunction<SearchFieldRenderProps>` | `'react-aria-SearchField'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| defaultValue | `string` | - | The default value (uncontrolled). |
| dir | `string` | - | - |
| enterKeyHint | `"search" \ | "enter" \ | "done" \ | "go" \ | "next" \ | "previous" \ | "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). |
| excludeFromTabOrder | `boolean` | - | Whether to exclude the element from the sequential tab order. If true,&#xA;the element will not be focusable via the keyboard by tabbing. This should&#xA;be avoided except in rare scenarios where an alternative means of accessing&#xA;the element or its functionality via the keyboard is available. |
| form | `string` | - | The \`\<form>\` element to associate the input with.&#xA;The value of this attribute must be the id of a \`\<form>\` in the same document.&#xA;See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| hidden | `boolean` | - | - |
| id | `string` | - | The element's unique identifier. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/id). |
| inert | `boolean` | - | - |
| inputMode | `"text" \ | "search" \ | "url" \ | "tel" \ | "email" \ | "none" \ | "numeric" \ | "decimal"` | - | 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. |
| lang | `string` | - | - |
| 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). |
| onAnimationEnd | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onBeforeInput | `FormEventHandler<HTMLInputElement>` | - | Handler that is called when the input value is about to be modified. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput\_event). |
| onBlur | `(e: FocusEvent<HTMLInputElement, Element>) => void` | - | Handler that is called when the element loses focus. |
| onChange | `(value: string) => void` | - | Handler that is called when the value changes. |
| onClear | `() => void` | - | Handler that is called when the clear button is pressed. |
| onClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onCompositionEnd | `CompositionEventHandler<HTMLInputElement>` | - | Handler that is called when a text composition system completes or cancels the current text composition session. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend\_event). |
| onCompositionStart | `CompositionEventHandler<HTMLInputElement>` | - | Handler that is called when a text composition system starts a new text composition session. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart\_event). |
| onCompositionUpdate | `CompositionEventHandler<HTMLInputElement>` | - | Handler that is called when a new character is received in the current text composition session. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate\_event). |
| onContextMenu | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onCopy | `ClipboardEventHandler<HTMLInputElement>` | - | Handler that is called when the user copies text. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy). |
| onCut | `ClipboardEventHandler<HTMLInputElement>` | - | Handler that is called when the user cuts text. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut). |
| onDoubleClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onFocus | `(e: FocusEvent<HTMLInputElement, Element>) => void` | - | Handler that is called when the element receives focus. |
| onFocusChange | `(isFocused: boolean) => void` | - | Handler that is called when the element's focus status changes. |
| onGotPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onInput | `FormEventHandler<HTMLInputElement>` | - | Handler that is called when the input value is modified. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input\_event). |
| onKeyDown | `(e: KeyboardEvent) => void` | - | Handler that is called when a key is pressed. |
| onKeyUp | `(e: KeyboardEvent) => void` | - | Handler that is called when a key is released. |
| onLostPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onPaste | `ClipboardEventHandler<HTMLInputElement>` | - | Handler that is called when the user pastes text. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste). |
| onPointerCancel | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onScroll | `UIEventHandler<HTMLDivElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLDivElement>` | - | - |
| onSelect | `ReactEventHandler<HTMLInputElement>` | - | Handler that is called when text in the input is selected. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/select\_event). |
| onSubmit | `(value: string) => void` | - | Handler that is called when the SearchField is submitted. |
| onTouchCancel | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLDivElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLDivElement>` | - | - |
| 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.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| slot | `string` | - | A slot name for the component. Slots allow the component to receive props from a parent component.&#xA;An explicit \`null\` value indicates that the local props completely override all props received from a parent. |
| 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). |
| style | `StyleOrFunction<SearchFieldRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| translate | `"yes" \ | "no"` | - | - |
| 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) => true \ | ValidationError` | - | A function that returns an error message if a given value is invalid.&#xA;Validation errors are displayed to the user when the form is submitted&#xA;if \`validationBehavior="native"\`. For realtime validation, use the \`isInvalid\`&#xA;prop instead. |
| validationBehavior | `"native" \ | "aria"` | `'native'` | Whether to use native HTML form validation to prevent form submission&#xA;when the value is missing or invalid, or mark the field as required&#xA;or invalid via ARIA. |
| value | `string` | - | The current value (controlled). |

### SearchField

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| aria-activedescendant | `string` | - | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |
| aria-autocomplete | `"none" \ | "inline" \ | "list" \ | "both"` | - | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be&#xA;presented if they are made. |
| aria-controls | `string` | - | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-errormessage | `string` | - | Identifies the element that provides an error message for the object. |
| aria-haspopup | `boolean \ | "false" \ | "true" \ | "menu" \ | "listbox" \ | "tree" \ | "grid" \ | "dialog"` | - | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| 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. |
| children | `ChildrenOrFunction<SearchFieldRenderProps>` | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | `ClassNameOrFunction<SearchFieldRenderProps>` | `'react-aria-SearchField'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| defaultValue | `string` | - | The default value (uncontrolled). |
| dir | `string` | - | - |
| enterKeyHint | `"search" \ | "enter" \ | "done" \ | "go" \ | "next" \ | "previous" \ | "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). |
| excludeFromTabOrder | `boolean` | - | Whether to exclude the element from the sequential tab order. If true,&#xA;the element will not be focusable via the keyboard by tabbing. This should&#xA;be avoided except in rare scenarios where an alternative means of accessing&#xA;the element or its functionality via the keyboard is available. |
| form | `string` | - | The \`\<form>\` element to associate the input with.&#xA;The value of this attribute must be the id of a \`\<form>\` in the same document.&#xA;See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| hidden | `boolean` | - | - |
| id | `string` | - | The element's unique identifier. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/id). |
| inert | `boolean` | - | - |
| inputMode | `"text" \ | "search" \ | "url" \ | "tel" \ | "email" \ | "none" \ | "numeric" \ | "decimal"` | - | 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. |
| lang | `string` | - | - |
| 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). |
| onAnimationEnd | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onBeforeInput | `FormEventHandler<HTMLInputElement>` | - | Handler that is called when the input value is about to be modified. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput\_event). |
| onBlur | `(e: FocusEvent<HTMLInputElement, Element>) => void` | - | Handler that is called when the element loses focus. |
| onChange | `(value: string) => void` | - | Handler that is called when the value changes. |
| onClear | `() => void` | - | Handler that is called when the clear button is pressed. |
| onClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onCompositionEnd | `CompositionEventHandler<HTMLInputElement>` | - | Handler that is called when a text composition system completes or cancels the current text composition session. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend\_event). |
| onCompositionStart | `CompositionEventHandler<HTMLInputElement>` | - | Handler that is called when a text composition system starts a new text composition session. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart\_event). |
| onCompositionUpdate | `CompositionEventHandler<HTMLInputElement>` | - | Handler that is called when a new character is received in the current text composition session. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate\_event). |
| onContextMenu | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onCopy | `ClipboardEventHandler<HTMLInputElement>` | - | Handler that is called when the user copies text. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy). |
| onCut | `ClipboardEventHandler<HTMLInputElement>` | - | Handler that is called when the user cuts text. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut). |
| onDoubleClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onFocus | `(e: FocusEvent<HTMLInputElement, Element>) => void` | - | Handler that is called when the element receives focus. |
| onFocusChange | `(isFocused: boolean) => void` | - | Handler that is called when the element's focus status changes. |
| onGotPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onInput | `FormEventHandler<HTMLInputElement>` | - | Handler that is called when the input value is modified. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input\_event). |
| onKeyDown | `(e: KeyboardEvent) => void` | - | Handler that is called when a key is pressed. |
| onKeyUp | `(e: KeyboardEvent) => void` | - | Handler that is called when a key is released. |
| onLostPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onPaste | `ClipboardEventHandler<HTMLInputElement>` | - | Handler that is called when the user pastes text. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste). |
| onPointerCancel | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onScroll | `UIEventHandler<HTMLDivElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLDivElement>` | - | - |
| onSelect | `ReactEventHandler<HTMLInputElement>` | - | Handler that is called when text in the input is selected. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/select\_event). |
| onSubmit | `(value: string) => void` | - | Handler that is called when the SearchField is submitted. |
| onTouchCancel | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLDivElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLDivElement>` | - | - |
| 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.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| slot | `string` | - | A slot name for the component. Slots allow the component to receive props from a parent component.&#xA;An explicit \`null\` value indicates that the local props completely override all props received from a parent. |
| 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). |
| style | `StyleOrFunction<SearchFieldRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| translate | `"yes" \ | "no"` | - | - |
| 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) => true \ | ValidationError` | - | A function that returns an error message if a given value is invalid.&#xA;Validation errors are displayed to the user when the form is submitted&#xA;if \`validationBehavior="native"\`. For realtime validation, use the \`isInvalid\`&#xA;prop instead. |
| validationBehavior | `"native" \ | "aria"` | `'native'` | Whether to use native HTML form validation to prevent form submission&#xA;when the value is missing or invalid, or mark the field as required&#xA;or invalid via ARIA. |
| value | `string` | - | The current value (controlled). |