Input is a themed version of the native form field that enables a user to interact and input data.

Input fields allow users to enter and interact with data. Often used with form layout, but can exist outside of a standard form.

If you are using an input for a form, check out the component. It handles errors, labels, and formatting for you.

Common input field anatomy includes:

• Label: Description of text field.
• Type: Type of the field to render e.g., “text, number, password, email.”
• Help Text: Context to what the user should do with text field.
• Placeholder Text: Example text within the text field.
• Input Field: Contain to accept text, numbers, or combination of both.

Examples

Default Input Field Anatomy

Best Practices

Input fields should:

• Use a label that is meaningful, clear, and concise.
• Use basic help text, do not hide it.
• Use placeholder text that’s formatted as an example, not as a label.
• Use sentence case and avoid all uppercase.
• Use the proper input length as an affordance to how much content can be entered.
• Use inline validation.
• Use the proper input type in HTML based on the data being collected. e.g., type='email' for email, type='number' for numeric values, type='text' for general text.

Optional text should:

• Be after label
• Be lower case
• Be contained in parenthesis

Help Text example

Placeholder Text

Placeholder text appears inside of an input field. This text can serve as an example of what the user could enter. When a user enters data into an input field the placeholder text should disappear. Placeholder text is not accessible to all users and should not be used to provide instruction or be required to use an input field.

Placeholder text should:

• Be used only for supplemental information
• Be written as examples, not instructions
• Be short and concise
• Be written in plain language

Input

The input allows users to enter text, numbers, or a combination of both as information to submit.

Inputs should:

• Be the proper length for the amount of content that can be entered
• Be a consistent vertical height

Validation and Errors

Validation and errors help the user understand what is incorrect in an input field.

• Validation should happen after the user fills out the field
• Error messages should be clear and explain what is incorrect and how to fix it
• The messages should be short and concise, single sentence, and sentence cased
• The messages should be written in plain language
• The error should be obvious to the user, with use of color or iconography
• The error should be associated with the input that’s causing the error. Use aria-describedby on the input to point to the id of the error.

Again, if you can use the component, it will handle all of this for you.