Text Input

Text inputs are form inputs that gather plain text information from users. Every text input component must have a label and an input field. Optional placeholder text can also be added to provide the user with example input and guidance for filling in the field.

Variants

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, blur and error states. The error state must be used with an input error component. An optional disabled state is also available.

Text Input in Disabled State

Use the disabled state when another action must be completed before the user can interact with the input.

Tell me something good.

Text Input in Error State

A text input or text area in the error state must be used with an input error component to guide the user in correcting the error.

Design Environment

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.

Microcopy

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.