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!

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.