Balance Logo
Balance
Reckon Design System

Text Field

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

The TextField component has been deprecated and will be removed in a future version. Use Field and TextInput instead.

- <TextField
- label="Field label"
- onChange={handleInputChange}
- value={inputValue}
- />
+ <Field label="Field label">
+ <TextInput
+ onChange={handleInputChange}
+ value={inputValue}
+ />
+ </Field>

Usage

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

Label

Each text field must be accompanied by a label. Effective form labeling helps users understand what information to enter into a text input.

Using placeholder text in lieu of a label is sometimes employed as a space-saving method. However, this is not recommended because it hides context and presents accessibility issues.

Open in Playroom

Label Visibility

There may be occasions where the label is apparent through context to sighted users, so you wish to omit it from the view. We still need a label attached to the input for assistive technology, in these cases you can provide the labelVisible property.

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. Use sentence-style capitalisation, and in most cases, write the text as a direct statement without punctuation.

Description

Description text contains pertinent information that assists the user in completing a field. Description text is always visible and appears underneath the label. Use sentence-style capitalisation, and in most cases, write the text as full sentences with punctuation.

We take your privacy seriously. We will never give your email to a third party.

Help text

Help text is hidden by default, and revealed in a tooltip invoked by an icon beside the label. Reserve help text for content only relevant during the first interaction a user has with the field. Use sentence-style capitalisation, and in most cases, write the text as full sentences with punctuation.

In most cases description is preferred.

Invalid message

Offer an invalid message to inform the user how their input violates the requirements of the field.

Passing an invalid message will automatically flag the the input as invalid
Inform the user how their input violates the requirements of the field

Reserve message space

Reserve the vertical space that will be taken by an invalid message. You would use this to stop subsequent elements from being pushed down when an invalid message is displayed.

 
Element to show document "reflow" when the message appears
Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo