Code

Implementation
SearchField Props

Common Examples

import { SearchField } from "@servicetitan/anvil2";

function ExampleComponent() {
  return <SearchField />;
}

Controlling search inputs

The value of search inputs are uncontrolled by default. To control a search input, use the value prop.

Uncontrolled

Demo

Controlled

Demo

Form Example

The SearchField component uses an HTML input and so can be used within an HTML form the same way that a regular HTML input element can.

Demo

React Accessibility

Add aria-label or aria-labelledby so that screen readers can properly announce what this is searching.For more guidance on form field labels and context, see input field context association best practices.

<SearchField
  autoComplete="off"
  disabled={false}
  size="medium"
  onClear={() => console.log("Cleared")}
  value="search term"
  onChange={(e) => console.log(e.target.value)}
  aria-label="Search"
/>

`SearchField` Props

The SearchField component accepts any valid HTML input props, other than prefix, required, children, as well as the following:

autoComplete

React.HTMLInputAutoCompleteAttribute

default:"off"

disabled

boolean

default:"false"

onClear

() => void

Callback when the clear button is clicked.

size

"small" | "medium" | "large"

default:"medium"

Anvil2 Web

Resources

Common Examples

Controlling search inputs

Uncontrolled

Controlled

Form Example

React Accessibility

`SearchField` Props

Anvil2 Web

Resources

​Common Examples

​Controlling search inputs

​Uncontrolled

​Controlled

​Form Example

​React Accessibility

​SearchField Props

Common Examples

Controlling search inputs

Uncontrolled

Controlled

Form Example

React Accessibility

`SearchField` Props