Components

SearchInput

A search field with a clear button, debounced search and a loading state.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

The search icon sits at the start; once a value is typed, a clear button appears at the end.

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>
  );
}

States

With a value, loading (a spinner in place of the icon) and disabled.

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

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-sm flex-col gap-lg">
        <SearchInput label="Search" defaultValue="Item" />
        <SearchInput label="Search" defaultValue="Item" loading />
        <SearchInput label="Search" placeholder="Search by name" disabled />
      </div>
    </Provider>
  );
}

Hidden label

hideLabel hides the label visually; screen readers still read it. landmark wraps the field in a role="search" region.

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

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

Search as you type

onSearch runs after a 300 ms pause; show loading until results arrive.

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

export default function SearchAsYouType() {
  const [loading, setLoading] = useState(false);
  const [count, setCount] = useState<number | null>(null);
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-sm flex-col gap-sm">
        <SearchInput
          label="Search"
          placeholder="Search by name"
          loading={loading}
          onSearch={(query) => {
            if (!query) return setCount(null);
            setLoading(true);
            setTimeout(() => {
              setLoading(false);
              setCount(query.length * 3);
            }, 700);
          }}
        />
        <p className="type-body-sm text-fg-subtle">{count === null ? '' : `${count} results`}</p>
      </div>
    </Provider>
  );
}

Light and dark mode

The icon and buttons use semantic tokens.

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

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-sm flex-col gap-lg">
        <SearchInput label="Search" defaultValue="Item" />
        <SearchInput label="Search" defaultValue="Item" loading />
        <SearchInput label="Search" placeholder="Search by name" disabled />
      </div>
    </Provider>
  );
}