Search

Live demo

I am hidden

Design

Usage

Search input allows users to search for specific content.

Anatomy

Search should be placed next to the filters to allow searching for specific content. Please refer to Placement in page designs for examples.

Placement

The state of the form field changes depending on the actions of the user. The structure of how the instances behave are outlined, right.

Transition to display a state change with a 0.25 ease.

Accessibility

Use the appropriate ARIA attributes for screen readers where applicable. Users should be able to TAB into the input field of the search box to begin typing and press ENTER to run the search query.

Code

import { Tabs } from '@shieldpay/bumblebee';

  <Search
    name="someSearchBox"
    onChange={(value) => setSearchValue(value)}
    onClear={() => setSearchValue('')}
    clearLabel={formatMessage({
      id: 'hive.components.search.clearLabel',
    })}
    label={formatMessage({
      id: 'hive.components.search.label',
    })}
    placeholder={formatMessage({
      id: 'hive.components.search.placeholder',
    })}
    value={searchValue}
  />