Skip to main content

Text Input

A text input allows users to enter any combination of letters, numbers, or symbols. Text input boxes can span single or multiple lines.


Default

Component Preview


Component Code

<form class="usa-form">
  <label class="usa-label" for="input-type-text">Text input label</label>
  <input class="usa-input" id="input-type-text" name="input-type-text" />
</form>

Text Area

Component Preview


Component Code

<form class="usa-form">
  <label class="usa-label" for="input-type-textarea">Text area label</label>
  <textarea class="usa-textarea" id="input-type-textarea" name="input-type-textarea"></textarea>
</form>

Error State

Component Preview

Error message goes here

Component Code

<form class="usa-form">
  <label class="usa-label usa-label--error" for="input-error">Text input with error</label>
  <span class="usa-error-message" id="input-error-message" role="alert">Error message goes here</span>
  <input class="usa-input usa-input--error" id="input-error" name="input-error" aria-describedby="input-error-message" />
</form>

Success State

Component Preview


Component Code

<form class="usa-form">
  <label class="usa-label" for="input-success">Text input with success</label>
  <input class="usa-input usa-input--success" id="input-success" name="input-success" />
</form>

Width Variants

Component Preview


Component Code

<form class="usa-form">
  <label class="usa-label" for="input-2xs">2xs width (5ex)</label>
  <input class="usa-input usa-input--2xs" id="input-2xs" name="input-2xs" />

  <label class="usa-label" for="input-xs">xs width (9ex)</label>
  <input class="usa-input usa-input--xs" id="input-xs" name="input-xs" />

  <label class="usa-label" for="input-sm">sm width (13ex)</label>
  <input class="usa-input usa-input--sm" id="input-sm" name="input-sm" />

  <label class="usa-label" for="input-md">md width (20ex)</label>
  <input class="usa-input usa-input--md" id="input-md" name="input-md" />

  <label class="usa-label" for="input-lg">lg width (30ex)</label>
  <input class="usa-input usa-input--lg" id="input-lg" name="input-lg" />

  <label class="usa-label" for="input-xl">xl width (40ex)</label>
  <input class="usa-input usa-input--xl" id="input-xl" name="input-xl" />

  <label class="usa-label" for="input-2xl">2xl width (50ex)</label>
  <input class="usa-input usa-input--2xl" id="input-2xl" name="input-2xl" />
</form>


Guidance

When to use the text input component

Unpredictable or freeform responses.
If you can't reasonably predict a user's answer to a prompt and there might be wide variability in users' answers.
Input simplicity.
When using another type of input will make answering more difficult. For example, birthdays and other known dates are easier to type in than they are to select from a date picker.
Pasted content.
When users want to be able to paste in a response.

When to consider something else

Predetermined input options.
When users are choosing from a specific set of options.

Usability guidance

Use fields appropriate to the length of the input.
The length of the text input provides a hint to users as to how much text to write. Do not require users to write paragraphs of text into a single-line input box; use a text area instead.
Consider the mobile context.
Text inputs are among the easiest type of input for desktop users but are more difficult for mobile users.
Wait to validate.
Only show error validation messages or stylings after a user has interacted with a particular field.
Avoid placeholder text.
Avoid using placeholder text that appears within a text field before a user starts typing. If placeholder text is no longer visible after a user clicks into the field, users will no longer have that text available when they need to review their entries.

Accessibility guidance

Customize form controls accessibly.
If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.
Avoid placeholder text.
Most browsers' default rendering of placeholder text does not provide a high enough contrast ratio.
Avoid splitting numbers.
Avoid breaking numbers with distinct sections (such as phone numbers, Social Security Numbers, or credit card numbers) into separate input fields. For example, use one input for phone number, not three (one for area code, one for local code, and one for number).

USWDS Documentation

For more guidance, view the USWDS Text Input Component Documentation.



Settings

This component has no settings.



Variants

Variant Description

.usa-input--error

The error state of the text input.

.usa-input--success

The success state of the text input.

.usa-input--[width]

Displays an input at a specific width. Accepts 2xs (5ex), xs (9ex), sm or small (13ex), md or medium (20ex), lg (30ex), xl (40ex), and 2xl (50ex).
Looking for U.S. government information and services?
Visit USA.gov