The search bar allows a user to easily find information within columns.
When to use:
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><Tablecolumns={[{ header: 'Sku', hash: 'sku', render: ({ sku }) => sku },{ header: 'Name', hash: 'name', render: ({ name }) => name },{ header: 'Stock', hash: 'stock', render: ({ stock }) => stock },]}items={items}/></>);}
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 |
---|
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. |