Input

An input field is a component that facilitates entry and editing of text and numbers. In general, input fields are used to collect and post subsequent information provided by users.

<Form isVertical>
  <ControlGroup v2>
    <Inputv2
      autoComplete="fname"
      id="fname"
      inputHelpText="Help text"
      label="Label"
      onChange={function noRefCheck() {}}
      type="text"
      value=""
    />
  </ControlGroup>
</Form>

Usage

Principles

Discoverable

Input fields should stand out and indicate that users can input information.

Clear

Input field states should be clearly differentiated from one another.

Efficient

Input fields should make it easy to understand the requested information and to address any errors.

Input types

Input fields collect user input in the following ways:

• Via a single-line text field

  • Single-line text field only display one line of text.

• Via a text area

  • Text areas are fixed-height fields.

Single-line text field

In single-line fields, as the cursor reaches the right field edge, text longer than the input line automatically scrolls left.

Single-line fields are not suitable for collecting long responses. For those, use a text area instead.

Text area

Text areas are taller than text fields and wrap overflow text onto a new line. They are a fixed height and scroll vertically when the cursor reaches the bottom of the field.

The large initial size indicates that longer responses are possible and encouraged.

Ensure the height of a text area fits within mobile screen sizes.

Common forms of usage

While input field are used to collect information from the user in a variety of different contexts, these three are common contexts in which the input field is used.

Transfers

Search

Enter a limit

Formatting

Anatomy

Input fields always contain the required elements for each state and additional optional elements.

Single-line text field

a. Container
b. Prefix (optional)
c. Label
d. Suffix (optional) *
e. Icon (optional) *
f. Explanation (optional)

*Suffix and icon are both aligned to the far right, within the container, and should not co-exist.

Text area

a. Container
b. Label
c. Explanation (optional)

Content

Before a user interacts with an input field, it is occupied by a placeholder label describing the expected input from the user. As the user interacts with the input field, the cursor takes the position of the placeholder label, and the label is moved up to the upper edge of the frame. The label can remain as is after the transition, or be replaced by a help text in the focus state.

Behavior

Scaling and adaption

As layouts adapt to larger screens and form factors, apply flexible container dimensions to input fields. Set minimum and maximum values for margins, padding, and container dimensions as layouts scale so that typography adjusts for better reading experiences.

Input fields can span the full width of the display on smaller screens.

Input fields should be bounded by flexible margins or other containers on larger screens.

As input fields expand within fluid layouts, avoid maintaining fixed margins and typography properties because this can lead to extra long input fields. Input fields should not, for example, span the full width of a large screen.

Using the available property “isVertical” will set the maximum width of input fields to 500 px.

Do

Use flexible margins, or containers, to keep input fields at an optimal width.

Don't

Let input fields span the full width of a larger screen.

Validation and errors

For input fields that validate their content, an error text accompanied by an error-icon, is introduced when applicable, together with the rebranding of the marker.

If only one error is possible, error text describes how to solve, and avoid, the error. If multiple errors are possible, error text describes how to solve, and avoid, the most likely error.

1. Single-line text field.
   
2. Text area.

Password

Single-line text fields can be used to collect passwords and will hide the characters as the user enters them. A user can choose to toggle the visibility of the characters that have been entered by clicking the view/hide icon on the right within the text field.

When using an input field to collect passwords, be sure to provide sufficient information, and help, as this process can quickly become frustrating for the user if he, or she, fails to enter the correct password.

Modify

Color theme

Input fields, both single-line text fields and text areas, can be shown in white or navy depending on the background and the contrast level.

1. Singe-line text field (default)
   
2. Singe-line text field (inverted)
   
3. Text area (default)
   
4. Text area (inverted)
   

Error

If an input field is placed on a dark background, the error-icon is branded white to ensure high contrast and readability. If the error-icon is placed on a light background, it is branded with the color red.

The marker always has the color red when the validation of a text field results in an error.

1. Single-line text field on a light background.
   
2. Single-line text field on a dark background.
   
3. Text area on a light background.
   
4. Text area on a dark background.