Text Input

formUSWDS-derived

A single-line text input for form data.

Variants

Default

Name

<div>
  <label class="flex-label" for="input-default">Name</label>
  <input class="flex-input" id="input-default" name="name" type="text"/>
</div>

Disabled

Disabled field

<div>
  <label class="flex-label" for="input-disabled">Disabled field</label>
  <input class="flex-input" id="input-disabled" type="text" disabled="" value="Cannot edit"/>
</div>

Width Variants

2xs (5ex)xs (9ex)sm (13ex)md (20ex)lg (30ex)xl (40ex)2xl (50ex)

<div>
  <label class="flex-label" for="input-2xs">2xs (5ex)</label>
  <input class="flex-input" id="input-2xs" type="text" data-width="2xs"/>
  <label class="flex-label" for="input-xs">xs (9ex)</label>
  <input class="flex-input" id="input-xs" type="text" data-width="xs"/>
  <label class="flex-label" for="input-sm">sm (13ex)</label>
  <input class="flex-input" id="input-sm" type="text" data-width="sm"/>
  <label class="flex-label" for="input-md">md (20ex)</label>
  <input class="flex-input" id="input-md" type="text" data-width="md"/>
  <label class="flex-label" for="input-lg">lg (30ex)</label>
  <input class="flex-input" id="input-lg" type="text" data-width="lg"/>
  <label class="flex-label" for="input-xl">xl (40ex)</label>
  <input class="flex-input" id="input-xl" type="text" data-width="xl"/>
  <label class="flex-label" for="input-2xl">2xl (50ex)</label>
  <input class="flex-input" id="input-2xl" type="text" data-width="2xl"/>
</div>

With Error

EmailPlease enter a valid email address.

<div>
  <label class="flex-label" for="input-error">Email</label>
  <input class="flex-input" id="input-error" name="email" type="email" data-state="error" aria-describedby="error-msg"/>
  <span class="flex-error-message" id="error-msg" role="alert"><span class="u-visually-hidden">Error: </span>Please enter a valid email address.</span>
</div>

Contract

Class mapping

USWDS	Flex	Notes
`usa-input`	`.flex-input`	Base text input class
`usa-input--error`	`data-state="error"`	Error state with thicker red border
`usa-input--success`	`data-state="success"`	Success state with thicker green border

Verified properties

font-familyfont-sizeline-heightcolorbackground-colorborder-radiusborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-top-styleborder-right-styleborder-bottom-styleborder-left-stylepadding-toppadding-rightpadding-bottompadding-left

Behavior promises

○ Focus ring visible on keyboard focus
○ Disabled state grays out input

Source CSS

Base styles: Form Control Base

/* flex-text-input — USWDS Text Input conformance
   Extends: Form Control Base (base-classes.css#form-control)
   Width variants: 2xs, xs, sm, md, lg, xl, 2xl
   States: error, success
   States: disabled, readonly */

.flex-input {
  block-size: var(--flex-control-height);

  &[readonly] {
    background-color: var(--flex-color-bg);
  }

  /* --- State: error --- */

  &[data-state="error"] {
    padding-block: 4px;
  }

  /* --- State: success --- */

  &[data-state="success"] {
    padding-block: 4px;
  }

  /* --- Width variants --- */

  &[data-width="2xs"] {
    max-inline-size: 5ex;
  }

  &[data-width="xs"] {
    max-inline-size: 9ex;
  }

  &[data-width="sm"] {
    max-inline-size: 13ex;
  }

  &[data-width="md"] {
    max-inline-size: 20ex;
  }

  &[data-width="lg"] {
    max-inline-size: 30ex;
  }

  &[data-width="xl"] {
    max-inline-size: 40ex;
  }

  &[data-width="2xl"] {
    max-inline-size: 50ex;
  }
}