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.
Beta