Balance Logo
Balance
Reckon Design System

Select Input

Allows the user to make a single selection from a short list of values.
Install
pnpm add @reckon-web/select-input
Import usage
import {
SelectInput
} from '@reckon-web/select-input';
  • Code
  • API

Alternatives

  • Autocomplete — Presents a filtered list only when the user has provided input. For extremely large datasets, where browsing the complete list would be inappropriate.
  • Combobox — Allows the user to browse, search, and make a single selection from a large list of values.

Usage

Label

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

Open in Playroom

Controlled

The SelectInput is a controlled component, which means you must provide value and onChange properties to "make it work".

Placeholder

You must provide placeholder text when the input does not have an initial value.

Disabled

You can disable individual options, or the entire select.

Groups

Group related options together, uses the optgroup element internally.

Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo