Switch to M&T
DesignDevelop
Version 4.5.1
This page's guidelines are under construction. For questions on this component's use, please reach out to the Currency team.
Overview

Text Input

A text input is a type of form input that gathers plain text information from users. Every text input component must have a label and an input field. Optional placeholder and caption elements can also be added. These will provide the user with examples and more information about how to fill in the field.

Variants

Keep a margin of 16px between the text input and any components above or below it. Text inputs will fill 100% width of the parent container when standing alone. When inline with another component, they will fill 50% width. Keep a 16px margin between the text input and any inline components.

Text Input
Use the default text field when the expected input is a single line, such as a name or phone number.
Text Area
Use the textarea field when the expected input is more than one line, such as a comment or contact request.

States

In addition to the default state, both types of text inputs have hover, focus, change and blur states. Optional success and loading states are also available. The error state takes the form of an Input Error component.

Success Text Input
The success state is a validation state that tells the user their entry is valid.
Disabled Text Input
The disabled state makes it impossible for the user to interact with the text input unless/until they interact with a different element on the page.

Microcopy

Labels

Labels should prompt the user to enter the necessary information using as few words as possible. Maximum length is one line of text at 310px width. If the label is a full sentence, use sentence case with no end punctuation, unless the label is a question. Otherwise use title case with no end punctuation.

Placeholders

Placeholders should give the user an example or show the required format of the input. Never use a placeholder instead of a label, as the user will lose the prompt once they begin typing. Use sentence case with no end punctuation, unless otherwise dictated by the input format.

Captions

Captions provide the user with more information than can fit in the label, including tips and notes. Write in full sentences and stay focused on the overall prompt. Use sentence case with end punctuation.

Usage Instance

The text input component is used in the following patterns, which each have additional guidelines:

  • Inline Help
  • User ID (Default)
  • User ID (Remembered)
  • Passcode
  • Passcode Creation
  • PIN
  • PIN Creation
  • Credit/Debit Card Number
  • Social Security Number (Full)
  • Social Security Number (Last 4 Digits)
  • One Time Passcode
  • Account Number
  • Security Question Answer
  • Security Question Creation
  • Currency
  • Date (Full – MM/DD/YYYY)
  • Date (Abbreviated – MM/YY)
  • Phone Number
  • Name
  • Primary Address
  • Routing Number