Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Form fields

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: 04 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="number" min="1" max="12">
    </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="number" min="1" max="31">
    </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="number" min="1900" max="2000">
    </div>
  </div>
  <span class="usa-form-hint" id="d7d4">Example: 04 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-input-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-input--error-message" role="alert">Error message text.</span>

Date of birth
Example: 04 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="number" min="1" max="12">
    </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="number" min="1" max="31">
    </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="number" min="1900" max="2000">
    </div>
  </div>
  <span class="usa-form-hint" id="f9e5">Example: 04 28 1986</span>
  <span class="usa-input--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-input--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-input--error-message usa-input--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-input--error-message usa-input--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-input--error-message usa-input--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-input--error-message usa-input--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-input--error-message usa-input--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-input--error-message usa-input--error-message-with-icon" role="alert">Error message text.</span>