Search

Overview

The search bar allows a user to easily find information within columns.

When to use:

  • To search a list or create filters within a table.
  • Find specific information within a page.

Implementation

Edit the code below to see your changes live!

function Example() {
  const [items, setItems] = useState(data);
  const [searchValue, setSearchValue] = useState('');
  const onChange = (event: React.ChangeEvent<HTMLInputElement>) =>
    setSearchValue(event.target.value);

  const onSubmit = () => {
    setItems((prevItems) => {
      if (searchValue) {
        return prevItems.filter((item) => item.name.includes(searchValue));
      }

      return data;
    });
  };

  return (
    <>
      <Box marginBottom="medium">
        <Search onChange={onChange} onSubmit={onSubmit} value={searchValue} />
      </Box>
      <Table
        columns={[
          { header: 'Sku', hash: 'sku', render: ({ sku }) => sku },
          { header: 'Name', hash: 'name', render: ({ name }) => name },
          { header: 'Stock', hash: 'stock', render: ({ stock }) => stock },
        ]}
        items={items}
      />
    </>
  );
}

Props

Supports most native <input /> element attributes.

Prop name
Type
Default
Description
value *string

Value of the search input

onChange *(event: React.ChangeEvent<HTMLInputElement>) => void

Native onChange attribute for a HTML input element.

onSubmit *(event: React.FormEvent<HTMLFormElement>) => void

Native onSubmit attribute for a HTML form element.

localization{ search: string }

Overrides the label with localized text.

Props ending with * are required

Do's and Don'ts

Do
Make the search bar easily noticable.
Always use a search icon within the input box to indicate search functionality.
Don't
Avoid using a search bar when there is small, easily navigable amount of data on a page.