Search Field

The SearchField component has been deprecated and will be removed in a future version. Use Field and SearchInput instead.

- <SearchField
-   label="Field label"
-   onChange={handleInputChange}
-   value={inputValue}
- />
+ <Field label="Field label">
+   <SearchInput
+     onChange={handleInputChange}
+     value={inputValue}
+   />
+ </Field>

The search components should be used as a means of discovering content, or as a filter to aid the user in finding content.

Field

The SearchField component connects the label and description to the input element.

<SearchField
  label="Select employees"
  description="Selected employees will be attached to this pay run"
  helpText="You probably won't need help text for search fields"
  placeholder="Filter employees"
/>

Sizes

The SearchField and SearchInput accept two sizes.

<Stack gap="large">
  <SearchField size="medium" label="Medium (default)" placeholder="Search" />
  <SearchField size="small" label="Small" placeholder="Search" />
</Stack>

Clear

Using the onClear property, the input value may be cleared by the user by clicking the "x" icon or pressing "Escape" while the input is focused.

const [value, setValue] = useState('');
function handleChange(event) {
  setValue(event.target.value);
}
function handleClear() {
  setValue('');
}
return (
  <SearchField
    label="Controlled search"
    value={value}
    onChange={handleChange}
    onClear={handleClear}
    placeholder="Enter some text"
  />
);