Balance Logo
Balance
Reckon Design System

Search Field

Searching is an intuitive method of discovery, offering users a way to explore a website or application using keywords.
Install
pnpm add @reckon-web/search-field
Import usage
import {
SearchInput,
SearchField
} from '@reckon-web/search-field';
  • Code
  • API

The search components should be used as a means of discovering content, or as a filter to aid the user in finding content.

Field

The SearchField component connects the label and description to the input element.

Selected employees will be attached to this pay run
Open in Playroom

Sizes

The SearchField and SearchInput accept two sizes.

Clear

Using the onClear property, the input value may be cleared by the user by clicking the "x" icon or pressing "Escape" while the input is focused.

Input

The SearchInput component is exposed from the package, though you'll most likely want the SearchField. When using the input be sure to maintain accessibility.

Accessible description for inclusive components
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.