Usage

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

Edit in Playroom

<Field label="Filter employees" labelVisible={false}>
  <SearchInput placeholder="Filter employees" />
</Field>

Sizes

SearchInput accept two sizes.

Edit in Playroom

<Stack gap="large">
  <Field label="Medium (default)">
    <SearchInput size="medium" placeholder="Search" />
  </Field>
  <Field label="Small">
    <SearchInput size="small" placeholder="Search" />
  </Field>
</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.

Edit in Playroom

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

Search Input

Sizes

Clear