Skip to main content Skip to navigation Skip to search

Inputs enable the user to input text information.


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.

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


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



Use when interactive and ready for input.


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


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

Username already exists


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 already exists


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


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.


message text


message text


message text

Controlled width

message text