Default

SearchInput is a wrapper around TextInput with some sensible defaults for using as a search or filter input.

Editable example
() => {
  const [searchTerm, setSearchTerm] = React.useState("");

  return (
    <SearchInput
      label="Search"
      placeholder="Search"
      value={searchTerm}
      onChange={setSearchTerm}
    />
  );
}
() => {
  const [searchTerm, setSearchTerm] = React.useState("");

  return (
    <SearchInput
      label="Search"
      placeholder="Search"
      value={searchTerm}
      onChange={setSearchTerm}
    />
  );
}

Best practices

1. It's preferred to filter a list of entries as the user types rather than requiring users to hit enter or click a search button to fetch results.
2. If an async fetch request is needed, debounce the fetch and use an AbortController to cancel any existing request when a new value is typed.
3. For a typeahead experience that shows filtered results in a floating menu, use a Combobox.

Clearing the value

SearchInput has a built-in clear button — just provide an onClear function that resets the value and the component will handle rendering the clear button.

Editable example
() => {
  const [searchTerm, setSearchTerm] = React.useState("");

  return (
    <SearchInput
      label="Search"
      placeholder="Search"
      value={searchTerm}
      onChange={setSearchTerm}
      onClear={() => setSearchTerm("")}
    />
  );
}
() => {
  const [searchTerm, setSearchTerm] = React.useState("");

  return (
    <SearchInput
      label="Search"
      placeholder="Search"
      value={searchTerm}
      onChange={setSearchTerm}
      onClear={() => setSearchTerm("")}
    />
  );
}

Accessibility

Always include a semantic label that describes what is being searched e.g. "Search pages". Even though the label is hidden, it is used to describe the input for screen readers. The placeholder is just a hint for sighted users and shouldn't be relied on for accessibility.