Balance Logo
Balance
Reckon Design System

Text Input

Text inputs enable the user to interact with and input content and data.
Install
pnpm add @reckon-web/text-input
Import usage
import {
Adornment,
AdornmentWrapper,
TextInput,
useInputStyles
} from '@reckon-web/text-input';
  • Code
  • API

Alternatives

  • Textarea — For multi-line text input

Usage

The TextInput component is a styled input element.

Invalid
Invalid
Open in Playroom

Size

There are three options for the size of the text input, "medium" is the default.

Weight

For use in data-dense interfaces you can apply a weight of "none" to hide the "chrome" of the input until the user interacts with it, on hover or focus.

Placeholder

Placeholder text provides hints or examples of what to enter.

Placeholder text disappears after the user begins entering data into the input and should not contain crucial information. Do not use placeholder text as a replacement for labels or descriptions.

Use sentence-style capitalisation, and in most cases, write the text as a direct statement without punctuation.

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