Skip to main content
U.S. flag

An official website of the United States government

Dot gov

Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Https

Secure .gov websites use HTTPS
A lock ( ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

Form fields

View USWDS component

View login.gov SCSS on GitHub

Text

<label for="fd85" class="usa-label">Text input</label>
<input id="fd85" type="text" class="usa-input">
<label for="e8c5" class="usa-label">Textarea (multiline) input</label>
<textarea id="e8c5" type="text" class="usa-textarea"></textarea>

Dates

Three text fields are the easiest way for users to enter most dates.

Date of birth
Example: 4 28 1986
<fieldset class="usa-fieldset">
  <legend class="usa-legend">Date of birth</legend>
  <div class="usa-memorable-date">
    <div class="usa-form-group usa-form-group--month">
      <label for="f5bf" class="usa-label">Month</label>
      <input id="f5bf" class="usa-input usa-input--inline" aria-describedby="d7d4" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric">
    </div>
    <div class="usa-form-group usa-form-group--day">
      <label for="b0fe" class="usa-label">Day</label>
      <input id="b0fe" class="usa-input usa-input--inline" aria-describedby="d7d4" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric">
    </div>
    <div class="usa-form-group usa-form-group--year">
      <label for="dc41" class="usa-label">Year</label>
      <input id="dc41" class="usa-input usa-input--inline" aria-describedby="d7d4" type="text" minlength="4" maxlength="4" pattern="[0-9]*" inputmode="numeric">
    </div>
  </div>
  <span class="usa-form-hint" id="d7d4">Example: 4 28 1986</span>
</fieldset>
<label for="ab84" class="usa-label">Dropdown label</label>
<select id="ab84" class="usa-select">
  <option value>- Select -</option>
  <option value="value1">Option A</option>
  <option value="value2">Option B</option>
  <option value="value3">Option C</option>
</select>

Radio buttons

Three styles of radio buttons are provided. Always label the grouping of items using a fieldset and legend for screen readers, using the usa-sr-only class. Do not use the label for visual rendering, as it has rendering quirks, unfortunately.

Simple

Group label
<fieldset class="usa-fieldset">
  <legend class="usa-sr-only">Group label</legend>
  <ul class="usa-input-list">
    <li>
      <input id="fa61" class="usa-radio__input" type="radio" name="de1a">
      <label for="fa61" class="usa-radio__label">Option 1</label>
    </li>
    <li>
      <input id="a786" class="usa-radio__input" type="radio" name="de1a" checked>
      <label for="a786" class="usa-radio__label">Option 2</label>
    </li>
    <li>
      <input id="b306" class="usa-radio__input" type="radio" name="de1a" disabled>
      <label for="b306" class="usa-radio__label">Option 3</label>
    </li>
  </ul>
</fieldset>

Normal

Group label
<fieldset class="usa-fieldset">
  <legend class="usa-sr-only">Group label</legend>
  <ul class="usa-input-list grid-row grid-gap-md">
    <li class="grid-col">
      <input id="a7e9" class="usa-radio__input" type="radio" name="a69d">
      <label for="a7e9" class="usa-radio__label usa-radio-bordered">Option 1</label>
    </li>
    <li class="grid-col">
      <input id="b7d5" class="usa-radio__input" type="radio" name="a69d" checked>
      <label for="b7d5" class="usa-radio__label usa-radio-bordered">Option 2</label>
    </li>
    <li class="grid-col">
      <input id="db6f" class="usa-radio__input" type="radio" name="a69d" disabled>
      <label for="db6f" class="usa-radio__label usa-radio-bordered">Option 3</label>
    </li>
  </ul>
</fieldset>

Large

Group label
<fieldset class="usa-fieldset">
  <legend class="usa-sr-only">Group label</legend>
  <ul class="usa-input-list">
    <li>
      <input id="a8c1" class="usa-radio__input" type="radio" name="d815">
      <label for="a8c1" class="usa-radio__label usa-radio-bordered usa-radio-large">
        <!-- Use the accurate heading level to maintain the document outline -->
        <h4 class="usa-radio-header">Option 1</h4>
        <p>Button support text</p>
      </label>
    </li>
    <li>
      <input id="b4ed" class="usa-radio__input" type="radio" name="d815" checked>
      <label for="b4ed" class="usa-radio__label usa-radio-bordered usa-radio-large">
        <h4 class="usa-radio-header">Option 2</h4>
        <p>Button support text</p>
      </label>
    </li>
    <li>
      <input id="b93f" class="usa-radio__input" type="radio" name="d815" disabled>
      <label for="b93f" class="usa-radio__label usa-radio-bordered usa-radio-large">
        <h4 class="usa-radio-header">Option 3</h4>
        <p>Button support text</p>
      </label>
    </li>
  </ul>
</fieldset>

Checkboxes

Three styles of checkboxes are provided as well. Always label the grouping of items using a fieldset and legend for screen readers, using the usa-sr-only class. Do not use the label for visual rendering, as it has rendering quirks, unfortunately.

Simple

Group label
<fieldset class="usa-fieldset">
  <legend class="usa-sr-only">Group label</legend>
  <ul class="usa-input-list">
    <li>
      <input id="dee5" class="usa-checkbox__input" type="checkbox" name="e189">
      <label for="dee5" class="usa-checkbox__label">Option 1</label>
    </li>
    <li>
      <input id="b711" class="usa-checkbox__input" type="checkbox" name="e189" checked>
      <label for="b711" class="usa-checkbox__label">Option 2</label>
    </li>
    <li>
      <input id="badc" class="usa-checkbox__input" type="checkbox" name="e189" disabled>
      <label for="badc" class="usa-checkbox__label">Option 3</label>
    </li>
  </ul>
</fieldset>

Normal

Group label
<fieldset class="usa-fieldset">
  <legend class="usa-sr-only">Group label</legend>
  <ul class="usa-input-list grid-row grid-gap-md">
    <li class="grid-col">
      <input id="d30c" class="usa-checkbox__input" type="checkbox" name="a792">
      <label for="d30c" class="usa-checkbox__label usa-checkbox-bordered">Option 1</label>
    </li>
    <li class="grid-col">
      <input id="a123" class="usa-checkbox__input" type="checkbox" name="a792" checked>
      <label for="a123" class="usa-checkbox__label usa-checkbox-bordered">Option 2</label>
    </li>
    <li class="grid-col">
      <input id="c6b3" class="usa-checkbox__input" type="checkbox" name="a792" disabled>
      <label for="c6b3" class="usa-checkbox__label usa-checkbox-bordered">Option 3</label>
    </li>
  </ul>
</fieldset>

Large

Group label
<fieldset class="usa-fieldset">
  <legend class="usa-sr-only">Group label</legend>
  <ul class="usa-input-list">
    <li>
      <input id="c288" class="usa-checkbox__input" type="checkbox" name="befb">
      <label for="c288" class="usa-checkbox__label usa-checkbox-bordered usa-checkbox-large">
        <!-- Use the accurate heading level to maintain the document outline -->
        <h4 class="usa-checkbox-header">Option 1</h4>
        <p>Button support text</p>
      </label>
    </li>
    <li>
      <input id="e484" class="usa-checkbox__input" type="checkbox" name="befb" checked>
      <label for="e484" class="usa-checkbox__label usa-checkbox-bordered usa-checkbox-large">
        <h4 class="usa-checkbox-header">Option 2</h4>
        <p>Button support text</p>
      </label>
    </li>
    <li>
      <input id="ea84" class="usa-checkbox__input" type="checkbox" name="befb" disabled>
      <label for="ea84" class="usa-checkbox__label usa-checkbox-bordered usa-checkbox-large">
        <h4 class="usa-checkbox-header">Option 3</h4>
        <p>Button support text</p>
      </label>
    </li>
  </ul>
</fieldset>

Form field groups

The fieldsets inputs default to a new line, unless the grid system is used to create a grid row.

Full name
<fieldset class="usa-fieldset">
  <legend class="usa-legend">Full name</legend>

  <label for="c985" class="usa-label">First name</label>
  <input id="c985" type="text" class="usa-input">

  <label for="a2d8" class="usa-label">Last name</label>
  <input id="a2d8" type="text" class="usa-input">
</fieldset>

Form validation errors

Error message text.
<label for="e9a4" class="usa-label">Text input validation example</label>
<input id="e9a4" type="text" class="usa-input usa-input--error">
<span class="usa-error-message" role="alert">Error message text.</span>

Examples of form validation error for other input types

Follow the same pattern of applying .usa-input--error to the effected input and append the error message in the appropriate span.

Error message text.
<label for="a37c" class="usa-label">Textarea (multiline) input</label>
<textarea id="a37c" type="text" class="usa-textarea usa-input--error"></textarea>
<span class="usa-error-message" role="alert">Error message text.</span>

Date of birth
Example: 4 28 1986 Error message text.
<fieldset class="usa-fieldset">
  <legend class="usa-legend">Date of birth</legend>
  <div class="usa-memorable-date">
    <div class="usa-form-group usa-form-group--month">
      <label for="e30e" class="usa-label">Month</label>
      <input id="e30e" class="usa-input usa-input--inline usa-input--error" aria-describedby="f9e5" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric">
    </div>
    <div class="usa-form-group usa-form-group--day">
      <label for="b857" class="usa-label">Day</label>
      <input id="b857" class="usa-input usa-input--inline usa-input--error" aria-describedby="f9e5" type="text" maxlength="2" pattern="[0-9]*" inputmode="numeric">
    </div>
    <div class="usa-form-group usa-form-group--year">
      <label for="a5dc" class="usa-label">Year</label>
      <input id="a5dc" class="usa-input usa-input--inline usa-input--error" aria-describedby="f9e5" type="text" minlength="4" maxlength="4" pattern="[0-9]*" inputmode="numeric">
    </div>
  </div>
  <span class="usa-form-hint" id="f9e5">Example: 4 28 1986</span>
  <span class="usa-error-message" role="alert">Error message text.</span>
</fieldset>

Error message text.
<label for="d8e1" class="usa-label">Dropdown label</label>
<select id="d8e1" class="usa-select usa-input--error">
  <option value>- Select -</option>
  <option value="value1">Option A</option>
  <option value="value2">Option B</option>
  <option value="value3">Option C</option>
</select>
<span class="usa-error-message" role="alert">Error message text.</span>

Radio buttons and checkboxes

For radio buttons and checkboxes, simply add an error message directly after the input list. Do not apply .usa-input--error to the effected inputs.

Group label
Error message text.
<fieldset class="usa-fieldset">
  <legend class="usa-sr-only">Group label</legend>
  <ul class="usa-input-list">
    <li>
      <input id="f5c3" class="usa-radio__input" type="radio" name="c8ff">
      <label for="f5c3" class="usa-radio__label">Option 1</label>
    </li>
    <li>
      <input id="b6bf" class="usa-radio__input" type="radio" name="c8ff" checked>
      <label for="b6bf" class="usa-radio__label">Option 2</label>
    </li>
    <li>
      <input id="bdfd" class="usa-radio__input" type="radio" name="c8ff" disabled>
      <label for="bdfd" class="usa-radio__label">Option 3</label>
    </li>
  </ul>
</fieldset>
<span class="usa-error-message usa-error-message--with-icon" role="alert">Error message text.</span>

Group label
Error message text.
<fieldset class="usa-fieldset">
  <legend class="usa-sr-only">Group label</legend>
  <ul class="usa-input-list grid-row grid-gap-md">
    <li class="grid-col">
      <input id="e5a0" class="usa-radio__input" type="radio" name="de9e">
      <label for="e5a0" class="usa-radio__label usa-radio-bordered">Option 1</label>
    </li>
    <li class="grid-col">
      <input id="c1a1" class="usa-radio__input" type="radio" name="de9e" checked>
      <label for="c1a1" class="usa-radio__label usa-radio-bordered">Option 2</label>
    </li>
    <li class="grid-col">
      <input id="b8da" class="usa-radio__input" type="radio" name="de9e" disabled>
      <label for="b8da" class="usa-radio__label usa-radio-bordered">Option 3</label>
    </li>
  </ul>
</fieldset>
<span class="usa-error-message usa-error-message--with-icon" role="alert">Error message text.</span>

Group label
Error message text.
<fieldset class="usa-fieldset">
  <legend class="usa-sr-only">Group label</legend>
  <ul class="usa-input-list">
    <li>
      <input id="fdf0" class="usa-radio__input" type="radio" name="ceb9">
      <label for="fdf0" class="usa-radio__label usa-radio-bordered usa-radio-large">
        <!-- Use the accurate heading level to maintain the document outline -->
        <h4 class="usa-radio-header">Option 1</h4>
        <p>Button support text</p>
      </label>
    </li>
    <li>
      <input id="d546" class="usa-radio__input" type="radio" name="ceb9" checked>
      <label for="d546" class="usa-radio__label usa-radio-bordered usa-radio-large">
        <h4 class="usa-radio-header">Option 2</h4>
        <p>Button support text</p>
      </label>
    </li>
    <li>
      <input id="b2bb" class="usa-radio__input" type="radio" name="ceb9" disabled>
      <label for="b2bb" class="usa-radio__label usa-radio-bordered usa-radio-large">
        <h4 class="usa-radio-header">Option 3</h4>
        <p>Button support text</p>
      </label>
    </li>
  </ul>
</fieldset>
<span class="usa-error-message usa-error-message--with-icon" role="alert">Error message text.</span>

Group label
Error message text.
<fieldset class="usa-fieldset">
  <legend class="usa-sr-only">Group label</legend>
  <ul class="usa-input-list">
    <li>
      <input id="f5c1" class="usa-checkbox__input" type="checkbox" name="b851">
      <label for="f5c1" class="usa-checkbox__label">Option 1</label>
    </li>
    <li>
      <input id="d21f" class="usa-checkbox__input" type="checkbox" name="b851" checked>
      <label for="d21f" class="usa-checkbox__label">Option 2</label>
    </li>
    <li>
      <input id="c30e" class="usa-checkbox__input" type="checkbox" name="b851" disabled>
      <label for="c30e" class="usa-checkbox__label">Option 3</label>
    </li>
  </ul>
</fieldset>
<span class="usa-error-message usa-error-message--with-icon" role="alert">Error message text.</span>

Group label
Error message text.
<fieldset class="usa-fieldset">
  <legend class="usa-sr-only">Group label</legend>
  <ul class="usa-input-list grid-row grid-gap-md">
    <li class="grid-col">
      <input id="ac05" class="usa-checkbox__input" type="checkbox" name="a4b3">
      <label for="ac05" class="usa-checkbox__label usa-checkbox-bordered">Option 1</label>
    </li>
    <li class="grid-col">
      <input id="bce9" class="usa-checkbox__input" type="checkbox" name="a4b3" checked>
      <label for="bce9" class="usa-checkbox__label usa-checkbox-bordered">Option 2</label>
    </li>
    <li class="grid-col">
      <input id="a677" class="usa-checkbox__input" type="checkbox" name="a4b3" disabled>
      <label for="a677" class="usa-checkbox__label usa-checkbox-bordered">Option 3</label>
    </li>
  </ul>
</fieldset>
<span class="usa-error-message usa-error-message--with-icon" role="alert">Error message text.</span>

Group label
Error message text.
<fieldset class="usa-fieldset">
  <legend class="usa-sr-only">Group label</legend>
  <ul class="usa-input-list">
    <li>
      <input id="b340" class="usa-checkbox__input" type="checkbox" name="b998">
      <label for="b340" class="usa-checkbox__label usa-checkbox-bordered usa-checkbox-large">
        <!-- Use the accurate heading level to maintain the document outline -->
        <h4 class="usa-checkbox-header">Option 1</h4>
        <p>Button support text</p>
      </label>
    </li>
    <li>
      <input id="aafb" class="usa-checkbox__input" type="checkbox" name="b998" checked>
      <label for="aafb" class="usa-checkbox__label usa-checkbox-bordered usa-checkbox-large">
        <h4 class="usa-checkbox-header">Option 2</h4>
        <p>Button support text</p>
      </label>
    </li>
    <li>
      <input id="dc6c" class="usa-checkbox__input" type="checkbox" name="b998" disabled>
      <label for="dc6c" class="usa-checkbox__label usa-checkbox-bordered usa-checkbox-large">
        <h4 class="usa-checkbox-header">Option 3</h4>
        <p>Button support text</p>
      </label>
    </li>
  </ul>
</fieldset>
<span class="usa-error-message usa-error-message--with-icon" role="alert">Error message text.</span>