Balance Logo
Reckon Design System

Select Field

The select field lets users choose one option from an options menu.
pnpm add @reckon-web/select-field
Import usage
import {
} from '@reckon-web/select-field';
  • Code
  • API


The SelectField component is the recommended component to use, which connects the label, description, and message to the select element.


Each select field must be accompanied by a label. Effective form labeling helps inform users which selection to make.

Open in Playroom


Description text contains pertinent information that assists the user in completing a field. Description text is always visible and appears underneath the label.

You will be able to filter employees by this value


Both the SelectInput and SelectField are controlled components, which means you must provide value and onChange properties to "make it work".

Invalid message

Offer an invalid message for required select fields.

This field is required

Select Input

The SelectInput component is just a styled select element.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.