Search input allows users to search for specific content.
Search should be placed next to the filters to allow searching for specific content. Please refer to Placement in page designs for examples.
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.
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.
import { Tabs } from '@shieldpay/search'; <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} />