Design System
Form fields
View USWDS component for guidance
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>
Format constraints
When enforcing a specific text input pattern, provide a hint in the form of an example.
Example: 000-123-4567
<label for="kvgx" class="usa-label">Social Security number</label>
<div id="kvgx-hint" class="usa-hint">Example: 000-123-4567</div>
<input id="kvgx" type="text" class="usa-input" aria-describedby="kvgx-hint" pattern="^\d{3}-?\d{2}-?\d{4}$">
Dates
Three text fields are the easiest way for users to enter most dates.
<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" 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" 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" 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>
Dropdowns
<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.
Default
<fieldset class="usa-fieldset">
<legend class="usa-legend">Group label</legend>
<ul class="usa-input-list">
<li>
<input id="fa61" class="usa-radio__input" type="radio" name="fa61">
<label for="fa61" class="usa-radio__label">Option - Unselected</label>
</li>
<li>
<input id="zeh4" class="usa-radio__input usa-focus" type="radio" name="zeh4">
<label for="zeh4" class="usa-radio__label">Option - Unselected Focus</label>
</li>
<li>
<input id="a786" class="usa-radio__input" type="radio" name="a786" checked>
<label for="a786" class="usa-radio__label">Option - Selected</label>
</li>
<li>
<input id="s3vb" class="usa-radio__input usa-focus" type="radio" name="s3vb" checked>
<label for="s3vb" class="usa-radio__label">Option - Selected Focus</label>
</li>
<li>
<input id="b306" class="usa-radio__input" type="radio" name="b306" disabled>
<label for="b306" class="usa-radio__label">Option - Disabled</label>
</li>
<li>
<input id="306b" class="usa-radio__input" type="radio" name="306b" disabled checked>
<label for="306b" class="usa-radio__label">Option - Disabled and Selected</label>
</li>
</ul>
</fieldset>
Bordered
<fieldset class="usa-fieldset">
<legend class="usa-legend">Group label</legend>
<ul class="usa-input-list">
<li>
<input id="a7e9" class="usa-radio__input usa-radio__input--bordered" type="radio" name="a7e9">
<label for="a7e9" class="usa-radio__label">Option - Unselected</label>
</li>
<li>
<input id="rzb8" class="usa-radio__input usa-radio__input--bordered usa-focus" type="radio" name="rzb8">
<label for="rzb8" class="usa-radio__label">Option - Unselected Focus</label>
</li>
<li>
<input id="ahfa" class="usa-radio__input usa-radio__input--bordered" type="radio" name="ahfa" checked>
<label for="ahfa" class="usa-radio__label">Option - Selected</label>
</li>
<li>
<input id="rkg9" class="usa-radio__input usa-radio__input--bordered usa-focus" type="radio" name="rkg9" checked>
<label for="rkg9" class="usa-radio__label">Option - Selected Focus</label>
</li>
<li>
<input id="db6f" class="usa-radio__input usa-radio__input--bordered" type="radio" name="db6f" disabled>
<label for="db6f" class="usa-radio__label">Option - Disabled</label>
</li>
<li>
<input id="b6fd" class="usa-radio__input usa-radio__input--bordered" type="radio" name="b6fd" disabled checked>
<label for="b6fd" class="usa-radio__label">Option - Disabled and Selected</label>
</li>
</ul>
</fieldset>
Tile
<fieldset class="usa-fieldset">
<legend class="usa-legend">Group label</legend>
<ul class="usa-input-list">
<li>
<input id="a8c1" class="usa-radio__input usa-radio__input--tile" type="radio" name="a8c1">
<label for="a8c1" class="usa-radio__label">Option - Unselected<span class="usa-radio__label-description">Support text</span></label>
</li>
<li>
<input id="g6pz" class="usa-radio__input usa-radio__input--tile" type="radio" name="g6pz">
<label for="g6pz" class="usa-radio__label usa-radio__label--illustrated">
<img alt="" class="usa-radio__image" src="/img/fingerprint-icon.svg">
<div class="usa-radio__label--text">
Option - Illustration
<span class="usa-radio__label-description">Support text</span>
</div>
</label>
</li>
<li>
<input id="t6wh" class="usa-radio__input usa-radio__input--tile usa-focus" type="radio" name="t6wh">
<label for="t6wh" class="usa-radio__label">Option - Unselected Focus<span class="usa-radio__label-description">Support text</span></label>
</li>
<li>
<input id="b4ed" class="usa-radio__input usa-radio__input--tile" type="radio" name="b4ed" checked>
<label for="b4ed" class="usa-radio__label">Option - Selected<span class="usa-radio__label-description">Support text</span></label>
</li>
<li>
<input id="v9h3" class="usa-radio__input usa-radio__input--tile usa-focus" type="radio" name="v9h3" checked>
<label for="v9h3" class="usa-radio__label">Option - Selected Focus<span class="usa-radio__label-description">Support text</span></label>
</li>
<li>
<input id="b93f" class="usa-radio__input usa-radio__input--tile" type="radio" name="b93f" disabled>
<label for="b93f" class="usa-radio__label">Option - Disabled<span class="usa-radio__label-description">Support text</span></label>
</li>
<li>
<input id="93fb" class="usa-radio__input usa-radio__input--tile" type="radio" name="93fb" disabled checked>
<label for="93fb" class="usa-radio__label">Option - Disabled and Selected<span class="usa-radio__label-description">Support text</span></label>
</li>
</ul>
</fieldset>
Checkboxes
Three styles of checkboxes are provided as well.
Default
<fieldset class="usa-fieldset">
<legend class="usa-legend">Group label</legend>
<ul class="usa-input-list">
<li>
<input id="dee5" class="usa-checkbox__input" type="checkbox" name="dee5">
<label for="dee5" class="usa-checkbox__label">Option - Unchecked</label>
</li>
<li>
<input id="nhjq" class="usa-checkbox__input usa-focus" type="checkbox" name="nhjq">
<label for="nhjq" class="usa-checkbox__label">Option - Unchecked Focus</label>
</li>
<li>
<input id="b711" class="usa-checkbox__input" type="checkbox" name="b711" checked>
<label for="b711" class="usa-checkbox__label">Option - Checked</label>
</li>
<li>
<input id="ojqb" class="usa-checkbox__input usa-focus" type="checkbox" name="ojqb" checked>
<label for="ojqb" class="usa-checkbox__label">Option - Checked Focus</label>
</li>
<li>
<input id="badc" class="usa-checkbox__input" type="checkbox" name="badc" disabled>
<label for="badc" class="usa-checkbox__label">Option - Disabled</label>
</li>
<li>
<input id="adcb" class="usa-checkbox__input" type="checkbox" name="adcb" disabled checked>
<label for="adcb" class="usa-checkbox__label">Option - Disabled and Checked</label>
</li>
</ul>
</fieldset>
Bordered
<fieldset class="usa-fieldset">
<legend class="usa-sr-only">Group label</legend>
<ul class="usa-input-list">
<li>
<input id="d30c" class="usa-checkbox__input usa-checkbox__input--bordered" type="checkbox" name="d30c">
<label for="d30c" class="usa-checkbox__label">Option - Unchecked</label>
</li>
<li>
<input id="lipc" class="usa-checkbox__input usa-checkbox__input--bordered usa-focus" type="checkbox" name="lipc">
<label for="lipc" class="usa-checkbox__label">Option - Unchecked Focus</label>
</li>
<li>
<input id="a123" class="usa-checkbox__input usa-checkbox__input--bordered" type="checkbox" name="a123" checked>
<label for="a123" class="usa-checkbox__label">Option - Checked</label>
</li>
<li>
<input id="xqgt" class="usa-checkbox__input usa-checkbox__input--bordered usa-focus" type="checkbox" name="xqgt" checked>
<label for="xqgt" class="usa-checkbox__label">Option - Checked Focus</label>
</li>
<li>
<input id="c6b3" class="usa-checkbox__input usa-checkbox__input--bordered" type="checkbox" name="c6b3" disabled>
<label for="c6b3" class="usa-checkbox__label">Option - Disabled</label>
</li>
<li>
<input id="6b3c" class="usa-checkbox__input usa-checkbox__input--bordered" type="checkbox" name="6b3c" disabled checked>
<label for="6b3c" class="usa-checkbox__label">Option - Disabled and Checked</label>
</li>
</ul>
</fieldset>
Tile
<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 usa-checkbox__input--tile" type="checkbox" name="c288">
<label for="c288" class="usa-checkbox__label">Option - Unchecked<span class="usa-checkbox__label-description">Support text</span></label>
</li>
<li>
<input id="hx88" class="usa-checkbox__input usa-checkbox__input--tile" type="checkbox" name="hx88">
<label for="hx88" class="usa-checkbox__label usa-checkbox__label--illustrated">
<div class="usa-checkbox__image">
<img alt="" src="/img/fingerprint-icon.svg">
</div>
<div class="usa-checkbox__label--text">
Option - Illustration
<span class="usa-checkbox__label-description">Support text</span>
</div>
</label>
</li>
<li>
<input id="u22j" class="usa-checkbox__input usa-checkbox__input--tile usa-focus" type="checkbox" name="u22j">
<label for="u22j" class="usa-checkbox__label">Option - Unchecked Focus<span class="usa-checkbox__label-description">Support text</span></label>
</li>
<li>
<input id="e484" class="usa-checkbox__input usa-checkbox__input--tile" type="checkbox" name="e484" checked>
<label for="e484" class="usa-checkbox__label">Option - Checked<span class="usa-checkbox__label-description">Support text</span></label>
</li>
<li>
<input id="afeg" class="usa-checkbox__input usa-checkbox__input--tile usa-focus" type="checkbox" name="afeg" checked>
<label for="afeg" class="usa-checkbox__label">Option - Checked Focus<span class="usa-checkbox__label-description">Support text</span></label>
</li>
<li>
<input id="ea84" class="usa-checkbox__input usa-checkbox__input--tile" type="checkbox" name="ea84" disabled>
<label for="ea84" class="usa-checkbox__label">Option - Disabled<span class="usa-checkbox__label-description">Support text</span></label>
</li>
<li>
<input id="a84e" class="usa-checkbox__input usa-checkbox__input--tile" type="checkbox" name="a84e" disabled checked>
<label for="a84e" class="usa-checkbox__label">Option - Disabled and Checked<span class="usa-checkbox__label-description">Support text</span></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.
<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
<span class="usa-error-message" role="alert">
Error message text
</span>
<span class="usa-success-message" role="alert">
Success message text
</span>
<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.
<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>
<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--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--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--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>
<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.
<fieldset class="usa-fieldset">
<legend class="usa-legend">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" role="alert">Error message text</span>
<fieldset class="usa-fieldset">
<legend class="usa-legend">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" role="alert">Error message text</span>
