SearchInput

When to use

SearchInput is for free-text search in lists, tables, menus and the help centre.

When not to use

• To pick from a fixed list: use Select.
• To filter by several criteria: use FilterBar; a search field can sit inside it.

Anatomy

Search

LightDark

Copy code

import { Provider, SearchInput } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <SearchInput label="Search" placeholder="Search by name" className="max-w-sm" />
    </Provider>
  );
}

1. Label: Visible, or hidden with hideLabel; always present.
2. Search icon: Decorative; turns into a spinner while loading.
3. Field: type="search", with a “Search” key on mobile keyboards.
4. Clear button: Appears at the end while there is a value.

Behaviour

• Escape clears the value; with an empty field, Escape passes on to a surrounding dialog or menu.
• The clear button returns focus to the field and “Search cleared” is announced once.
• onSearch runs debounceMs after typing stops, and at once when cleared. Enter calls onSubmit.
• loading does not lock the field; users can keep typing.
• The browser’s own clear button is hidden; a named one is drawn instead.

Guidelines

• Write a meaningful label even when hidden: “Search” or “Search records”.
• Say what can be searched in the placeholder: “Search by name”.
• Use landmark for the main search of a page; keep one search region per page.
• Show the number of results near the field; use an empty state component when there are none.

Content

• The placeholder starts with a verb: “Search by name”.

Turkish	English
Aramayı temizle	Clear search
Arama temizlendi	Search cleared
Aranıyor	Searching

Related components

• TextInput: A plain text field.
• FilterBar: Filtering by criteria.
• DataTable: Carries a search field in its toolbar.