Inputs enable the user to input text information.

Usage

Use inputs in a form as a way to allow the user to enter a value associated with a key, such as entering their name in a field labeled name.

Input label

Use an input to support the text information of a single sentence or less.

vs

Textarea label

Use an textarea to support the text information of a multiple lines.

States

Username

Enabled

Use when interactive and ready for input.

Username

Active

Use when selected by a user with an input method, such as mouse or keyboard.

Username

Disabled

Use when not interactive. For example, when a user does not have permissions to edit the input.

Username Username already exists

Error

Use to communicate a user or system error. This validation can happen when the user moves away from the input or after attempting to submit a form. For example, invalid input or username already taken.

Username Username already exists

Success

Use to provide real-time feedback immediately after a user’s input. For example, username available.

Layouts

Inputs are available in vertical, horizontal, compact, and controlled-width layout. Controlled-width layout is an additional option for setting the width in cases where the control may be unattractive or less usable if the underline is allowed to fill the full width of its container. Example: The text the user will input is of a known character count or within a small range. See more layout guidelines on the form page.

Vertical

label message text

Horizontal

label message text

Compact

label message text

Controlled width

Label message text