Search Field

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

Controlled

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.

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

Search Field – Code

Common Examples

Controlling search inputs

Uncontrolled

Controlled

Form Example

React Accessibility

`SearchField` Props

Anvil2 Web

Resources

Documentation Index

​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