Text Input
Text fields give end-users a way to enter and edit information. They are used in forms, modal dialogs, tables, and other surfaces where text input is required.
Interactive Playground
The Interactive Playground allows you to experiment with various Text Input styles and variations. Once you get the results you want, copy the HTML or React code provided and paste it into your application.
<form class="neo-form"><divdata-testid="NeoInputWrapper-root"class="neo-form-control"><divdata-testid="NeoInputWrapper-group-root"class="neo-input-group"><label for=":R0:">Label</label><div class="neo-input-editable__wrapper"><inputaria-describedby=":R0:-description"class="neo-input"id=":R0:"tabindex="0"type="text"><buttonaria-label="clear input"class="neo-input-edit__icon neo-icon-end"type="button"></button></div><divclass="neo-input-hint"id=":R0:-description">Additional content</div></div></div></form>
<Form><TextInputhelperText="Additional content"label="Label"type="text"/></Form>
Anatomy
Text input fields vary according to the amount and type of information expected. For data that is essential, a “Required” marker is attached to the label.
Text Input
The text input field is used when there are only a few words expected for the data, such as a first name or a last name.
Label:
The label for the field specifies the type of information expected.Required Marker:
This icon indicates that completing this input is mandatory. The user will not be able to leave this screen until all required fields have data entered.Input Text:
Enter a few words or a short sentence in this space. The text will automatically scroll with the text.Container:
The data entered is contained within the outlined space.Helper Text:
Additional information on the data to be entered is placed here. It can include formatting (i.e. mm/dd/yyyy) or other helpful directions (i.e. password requirements).
Text Area
The text area field is used when the data entered can be several sentences or paragraphs long.
Label:
The label for the field specifies the type of information that is expected.Input Text:
Enter the text in this space. Limits can be placed upon the total number of characters allowed.Container:
The data entered is contained within the outlined space.Helper Text:
Additional information on the data to be entered is placed here.Character Count:
Shows the number of characters entered and the maximum number of characters allowed for the field.
Password Input
The password input field is used when the data entered should remain hidden for security purposes, such as for passwords. Text entered is replaced with the * character to ensure confidentiality.
Label:
The label identifies this as a password field, and may include the name of the password that is needed (i.e. “Sales Password”).Required Label Icon:
This icon indicates that completing this input is mandatory. The user will not be able to leave this screen until all required fields have data entered.Password Input Text:
Enter the password in this space. By default, the value is hidden.Container:
The password entered is contained within the outlined space.Password Icon Trigger:
Click this icon to make the entered password visible in the container. This can help the user to verify that they have entered the correct password.Password Requirements:
A list of all the password requirements in detail. This can include the minimum length and specific character requirements (i.e. at least one upper case and one lower case, at least one numeric character, etc.).
States
Text input fields can appear in one of five states.
Default:
This is the default state for the field, and shows that it is ready to receive data.Hover:
The field changes to Hover when the mouse is moved over the container.Active:
While entering text in the field, it becomes Active.Error:
This state shows that something is wrong with the data entered. It may be the wrong data type (e.g. text instead of a date), or it could be a required field that has been left empty.Disabled:
When disabled, the field cannot be changed and new data cannot be entered. It will remain locked until some other field is populated or a setting is changed. The current value for the field is displayed.
Types
A wide variety of options exist for the text entry field. These vary according to the type of data to be entered, associated units of measure, and the presence of icons.
Default:
This is the simplest type with no added features.Left Icon:
An icon can be added to the input field if it helps the user to identify the information required. This icon appears at the left-side of the field.Right Icon:
An icon can be added to the input field if it helps the user to identify the information required. This icon appears at the right-side of the field.Left and Right Icons:
Adds icons at both ends of the field.Prefix:
The prefix to the field is often added to show the units of measure for the data, or for other prepended information.Suffix:
The suffix to the field appends other fixed information to the field, such as a domain or unit of measure (e.g. seconds).Prefix and Suffix:
Both a prefix and a suffix can be added to the input field as appropriate.Left Icon and Suffix:
Both a left icon and a suffix can be added to the input field.Read Only:
This field is for display purposes only and the data cannot be changed.
Behavior
The text input field can be modified to suit the type of data being entered.
Helper Text
Helper text provides guidance as to the type of data or the format of that data, such as the appearance of a date field (i.e. mm/dd/yyyy) or password.
DO: Use helper text to provide additional information on the input, such as format requirements or a description.
DON'T: Do not use helper text as a placeholder. It disappears the moment the user starts typing so they lose the guidance.
DO: Use helper text for supplemental information only when needed, such as for examples.
DON'T: Do not use placeholders unnecessarily.
Multiple Lines
Larger amounts of text can entered using the Text Area input box. This prevents text from being cutoff.
DO: Use a text area field for content that requires multiple lines or paragraphs.
DON'T: Do not use single line inputs if there is a large amount of text. Instead use the Text Area input box.
Prefix and Suffix
A prefix or suffix can be added to an input field to guide users toward the correct type of data to be entered. This also tells the user that including units in the data is not required or expected. The information in the suffix or prefix should be constant, not a selectable value.
DO: Use the prefix and suffix styles to provide additional context to an input when needed.
DON'T: Do not use the prefix and suffix styles for data that can be dynamically changed.
Widths
The width of input fields should be the same. For naturally narrower fields, group them together onto a single line with a total width equal to the other input fields on the page.
DO: Keep vertically stacking inputs the same width whenever possible.
DON'T: Do not use inputs with different widths if there is enough space.
Password Input
Password input fields hide the data entered to provide security to this important piece of data. A suffix icon can be added that shows the hidden text so the user can verify they have typed it correctly. Add any password requirements in the helper text field to guide users appropriately. These hints should change as the requirements are met.
DO: Indicate successfully completed requirements for password.
DON'T: Do not use the helper text to indicate an error without providing enough information to fix the problem.
DO: List all password requirements in details.
DON'T: Do not use the helper text to show password requirements.
Specs
The settings for input fields are shown below.
Sizes
There are 2 standard sizes for text input fields. Both sizes share 4 pixel padding above and below the container. The font size remains the same regardless of the field size.
