<commit_before>---
layout: page
title:  Form fields
category: Page components
redirect_from: "/ui-toolkit/form-fields.html"
---

- [Text input fields](#text-input-fields)
- [Labels & helper text](#labels-and-helper-text)
- [Checkboxes & radio buttons](#checkboxes-and-radio-buttons)
- [Dropdowns](#dropdowns)
- [Range sliders](#range-sliders)
{: class="toc"}

<!--Intro-->

<div class="content-50 content-first">


<div class="lead-in">
This page covers use cases, specs, accessibility, and responsive considerations for major form field UI components.

In general, forms should be as simple and direct as possible to minimize scrolling (think mobile first). Keep your queries to a minimum, and ask only what is absolutely needed.  Make inputs as self-explanatory as possible, with a minimum of helper text. Avoid the use of disabled fields where possible, and use progressive disclosure instead.
</div>

</div>


<div class="content-50 content-last">
  <h5 class="repo-list-header">Source Code</h5>
  <ul class="repo-list">
    <li>
      <span class="cf-icon cf-icon-github"></span>
    </li>
    <li>
      <a href="https://github.com/cfpb/capital-framework/tree/canary/src/cf-forms"><h4>cf-forms</h4></a>
      <p>Forms in Capital Framework</p>
    </li>
  </ul>
</div>

<!--**************************************    Text Input fields    **************************************-->

## Text input fields

<div class="content-66 content-first">
#### Usability
Consider matching text input field lengths to the information requested so that users can quickly grasp what's being asked. It’s hard to understand at a glance that a single 1000-px-wide text field is asking for your phone number. A better affordance is three short text fields for area code, prefix, and last four digits.

#### Responsive design
As the viewport resizes to smaller breakpoints, stack and snap text input fields to 100% width when inline fields no longer fit on one line.

#### Accessibility
For screen readers, make sure the tab focus order is correct. Consider the order in which error messages should be read if they fall below the text field.

### States
</div>

<div class="content-50 content-first">

#### Default

- Border: 1 px, Gray 60 (#919395)
- Height: 35 px
- Padding: 7 px
- Text: Avenir Next Regular, 16 px, Gray (#5a5d61)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<input class="a-text-input" placeholder="Placeholder text" type="text">
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Focus

* Border: 2 px, Pacific (#0072ce)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<input class="a-text-input a-text-input__focused" placeholder="Placeholder text" type="text">
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Error

- Border: 2 px, Red (#d14124)
- Error minicon and message should appear below the field (see error messaging below)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<input class="a-text-input a-text-input__error" type="text" value="Invalid input">
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Disabled

- Border: 1 px, Gray 60 (#919395)
- Fill: Gray 5 (#f7f8f9)
- Text: Avenir Next Regular, 16 px, Gray (#5a5d61)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<input class="a-text-input a-text-input__disabled" disabled="true" autocomplete="off" type="text" value="" title="Test input" placeholder="Placeholder text">
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Multi-line

Use for longer-form answers.

- Border: 1 px, Gray 60 (#919395)
- Text: Avenir Next Regular, 16 px, Gray (#5a5d61) 

</div>

<div class="content-50 content-last">

{::nomarkdown}
<textarea class="a-text-input" cols="30" rows="5">Placeholder text</textarea>
{:/nomarkdown}

</div>
<br>
<br>


<!--******************************-    LABELS AND HELPER TEXT     ******************************-->

## Labels and helper text

<!--******   LABELS     **********-->

<div class="content-66 content-first">

### Labels

</div>

<div class="content-50 content-first">

#### Form field labels

- H4 (Avenir Next Medium, 18 px), Black (#101820)
- Text is top aligned
- Margin bottom: 10 px

</div>

<div class="content-50 content-last">
{::nomarkdown}
<label class="a-label a-label__heading">
    Label
</label>
<input class="a-text-input" type="text">
{:/nomarkdown}
</div>

---

<div class="content-50 content-first">

#### Fieldset legend

- H3 (Avenir Next Medium, 22 px), Black (#101820)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<fieldset>
    <legend>Fieldset legend</legend>
    <div class="form-group">
        <div class="form-group_item">
            <label class="a-label" for="name1">
                Label
            </label>
            <input class="a-text-input" type="text" id="name1" value="">
        </div>
        <div class="form-group_item">
            <label class="a-label" for="name2">
                Label
            </label>
            <input class="a-text-input" type="text" id="name2" value="">
        </div>
    </div>
</fieldset>
{:/nomarkdown}

</div>

<!--******   HELPER TEXT     **********-->

<br>

<div class="content-66 content-first">

<h3> Helper text</h3>

</div>

<div class="content-66 content-first">

For screen reader accessibility, consider using the <i>aria-describedby</i> attribute for helper text, which gives users of screen readers the information they need while allowing more flexibility with placement.

</div>

<br>

<div class="content-50 content-first">

#### Block helper text

Use block helper text to explain why a piece of information is being requested, address security and privacy concerns, and suggest ways of providing answers other than providing formatting examples.

- Text: Avenir Next Regular 14 px, Dark Gray (#43484e)
- Margin bottom: 10 px

</div>

<div class="content-50 content-last">

{::nomarkdown}
<label class="a-label a-label__heading" for="helper-example">
    Label
</label>
<label class="form-label-helper-text" for="helper-example">
Use block helper text for instructions.
</label>
<input class="a-text-input" type="text" id="helper-example">
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Inline helper text

Use to indicate whether a field is optional or required.

- Text: Avenir Next Regular, 14 px, Dark Gray (#43484e)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<label class="a-label a-label__heading" for="helper-inline-example">
    Label <span class="form-label-helper-text">(optional)</span>
</label>
<input class="a-text-input" type="text" id="helper-inline-example">
{:/nomarkdown}
</div>

---

<div class="content-50 content-first">

#### Placeholder text

Use placeholder text for formatting examples only. Don’t use for instructions. Once an input field is focused, the placeholder text is lost.

- Text: Avenir Next Regular, 16 px, Gray (#5a5d61)


</div>

<div class="content-50 content-last">

{::nomarkdown}
<div class="form-group">
    <div class="form-group_item">
        <input class="a-text-input" placeholder="e.g. (212) 555-1212" type="text">
    </div>
    <br>
    <div class="form-group_item">
        <input class="a-text-input" placeholder="mm/dd/yyyy" type="text">
    </div>
</div>
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Required vs. optional fields

Where possible, design your forms to include required fields only. Add instructions at the top of the form to clearly indicate that all fields are required unless otherwise noted. If a field is optional, indicate it with inline helper text, as shown here. Don't indicate which fields are required; that would only introduce redundant visual noise.

Try not to design forms consisting mainly of optional fields. If you must do so, mark required field labels only with inline helper text.


</div>

<div class="content-50 content-last">

{::nomarkdown}
<div class="form-group">
    <div class="form-group_item">
        <label class="a-label a-label__heading" for="helper-inline-required">
            Label <span class="form-label-helper-text">(required)</span>
        </label>
        <input class="a-text-input" type="text" id="helper-inline-required">
    </div>
    </br>
    <div class="form-group_item">
        <label class="a-label a-label__heading" for="helper-inline-optional">
            Label <span class="form-label-helper-text">(optional)</span>
        </label>
        <input class="a-text-input" type="text" id="helper-inline-optional">
    </div>
</div>
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Error messaging

- Error minicon and message should appear below the field.

- Text: Avenir Next Regular, 16 px, Gray (#5a5d61)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<img src="{{site.github.url}}/static/img/forms/field-level-alert.png" />
{:/nomarkdown}

</div>



<!--******************************-    VALIDATION     ******************************-->
<br>

## Form validation

<div class="content-66 content-first">

Where possible, correct formatting errors immediately using client-side validation so that the user does not have to wait until submitting to see what went wrong. (This is especially frustrating if the information the user enters the first time around is not cached on submit and they have to fill out all the fields again from scratch.) If letters are entered in a date field, if an email address is missing the “@” sign, let the user know right away—show a field-level error on blur.

That said, it’s a good idea to always validate on the server side even if you use client-side validation for formatting checks. That’s because JavaScript validation may not work on all clients; JavaScript errors could occur no matter the client; and JS validation can easily be bypassed, which raises security concerns.

In general, the best practice for server-side validation is to mark errors with both form-level AND field-level errors.

#### Accessibility
For screen reader accessibility, form-level errors should include anchor links to the problem field in question.

In general, use distinct icons, contrasting colors, prominent placement and text to indicate errors. Don’t rely on just one method, as users can have many different accessibility needs (color blind users, visually impaired users, users with motor control issues).

### Field-level alert

</div>

<div class="content-50 content-first">

#### Error

* Use to indicate a problem with a particular field input

</div> 

<div class="content-50 content-last">

{::nomarkdown}
<img src="{{site.github.url}}/static/img/forms/field-level-alert.png" />
{:/nomarkdown}

<br>

</div>

<div class="content-66 content-first">

### Form-level notifications

</div>

<div class="content-50 content-first">

#### Errors

Use after validating on the server side to call out input errors preventing form submission

- For screen reader accessibility, include anchor links to the fields that need correction
- Place form-level alerts below the form title

</div>

<div class="content-50 content-last">

<!--insert error with links -->
{::nomarkdown}
<img src="{{site.github.url}}/static/img/forms/form-level-errors.png" />
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Action

Use [animated minicons]({{site.github.url}}/brand-guidelines/minicons.html#animation) to reassure the user that an action is functioning as intended.

</div>

<div class="content-50 content-last">

{::nomarkdown}
<img src="{{site.github.url}}/static/img/forms/form-level-action.png" />
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">


#### Success

Use to confirm that the form has been successfully submitted

</div>


<div class="content-50 content-last">

<!--insert this form has been submitted successfully message -->
{::nomarkdown}
<img src="{{site.github.url}}/static/img/forms/form-level-success.png" />
{:/nomarkdown}

</div>



<!--******************************-    CHECKBOXES AND RADIO BUTTONS     ******************************-->


<br>
## Checkboxes and radio buttons

<!--******   CHECKBOXES     **********-->

<div class="content-66 content-first">

<h3>Checkboxes</h3>

Use checkboxes when the user can select more than one option from a list. Make clear with helper text that this is the case.

#### Usability
To optimize usability, consider using <a href="#large-target">checkboxes with large target areas</a>. If these won’t fit into the design and the default style shown below is used, make sure the target area is at least 45 x 45 px and that it includes the text label.

#### Accessibility
To optimize screen reader accessibility, lay out checkboxes vertically rather than horizontally.

<br>

### States
</div>

<div class="content-50 content-first">

#### Default

- 20 x 20 px
- Margin right: 10 px
- Border: 1 px, Gray 60 (#919395)
- Fill: White (#ffffff)
- Text: Avenir Next Regular, 16 px, Gray (#5a5d61)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<div class="m-form-field m-form-field__checkbox">
    <input class="a-checkbox" type="checkbox" id="test_checkbox">
    <label class="a-label" for="test_checkbox">Option 1</label>
</div>
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Focused/Hover

- Border: 2 px, Pacific (#0072CE)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<div class="m-form-field m-form-field__checkbox">
    <input class="a-checkbox" type="checkbox" id="test_checkbox">
    <label class="a-label" for="test_checkbox">Option 1</label>
</div>
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Selected

- Border: 1 px, Pacific (#0072CE)
- Fill: 14 x 14 px, Pacific (#0072CE)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<div class="m-form-field m-form-field__checkbox">
    <input class="a-checkbox" type="checkbox" id="test_checkbox">
    <label class="a-label" for="test_checkbox">Option 1</label>
</div>
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Disabled

- Border: 1 px, Gray 60 (#919395)
- Fill: Gray 80 (#75787b)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<input class="a-checkbox a-checkbox__disabled" type="checkbox">
<label class="a-checkbox a-checkbox__heading">Option 1</label>
{:/nomarkdown}

</div>


<!--******   RADIO BUTTONS     **********-->

<br>
<div class="content-66 content-first">

### Radio buttons

Use radio buttons when the user can choose only one option out of a list. Use these for a small number of discrete elements—avoid long lists of radio buttons. When there are more than two options, stack radio buttons vertically.

#### Usability
Leave radio buttons unselected as the default. It’s easy for users to miss that a radio button has been preselected, and to submit a form with an erroneous answer.

Never use radio buttons for optional questions. Once a radio button is selected from a list, it or another choice must remain selected and there is no going back unless you reload the form.

Consider using <a href="#large-target">radio buttons with large target areas</a>. If these won’t fit into your design and you need to use the default style shown below, make sure the target area is at least 45x45px and includes the option text.


#### Accessibility
For screen readers, be aware that there are some issues with voiceover reading radio buttons. To get around this, consider using the aria-describedby attribute.

### States

</div>

<div class="content-50 content-first">

#### Default

- 20 x 20px
- Margin right: 10 px
- Border: 1 px, Gray 60 (#919395)
- Fill: White (#ffffff)
- Text: Avenir Next Regular, 16 px, Gray (#5a5d61)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<div class="m-form-field m-form-field__radio">
    <input class="a-radio" type="radio" id="test_radio">
    <label class="a-label" for="test_radio">Option 1</label>
</div>
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Hover/Focused

- Border: 2 px, Pacific (#0072CE)

</div> 

<div class="content-50 content-last">

{::nomarkdown}
<div class="m-form-field m-form-field__radio">
    <input class="a-radio" type="radio" id="test_radio">
    <label class="a-label" for="test_radio">Option 1</label>
</div>
{:/nomarkdown}

</div>


---

<div class="content-50 content-first">

#### Selected

- Border: 1 px, Pacific (#0072CE)
- Fill: 14 x 14 px, Pacific (#0072CE)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<div class="m-form-field m-form-field__radio">
    <input class="a-radio" type="radio" id="test_radio">
    <label class="a-label" for="test_radio">Option 1</label>
</div>
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Disabled

- Border: 1 px, Gray 60 (#919395)
- Fill: Gray 80 (#75787b)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<div class="m-form-field m-form-field__radio">
    <input class="a-radio" type="radio" id="test_radio">
    <label class="a-label" for="test_radio">Option 1</label>
</div>
{:/nomarkdown}

</div>

<!--******   LARGE TARGET CHECKBOXES AND BUTTONS     **********-->

<br>

<div class="content-66 content-first">

<h3 id="large-target">Checkboxes and radio buttons with large target areas</h3>

<commit_msg>live coded images updates<commit_after>---
layout: page
title:  Form fields
category: Page components
redirect_from: "/ui-toolkit/form-fields.html"
---

- [Text input fields](#text-input-fields)
- [Labels & helper text](#labels-and-helper-text)
- [Checkboxes & radio buttons](#checkboxes-and-radio-buttons)
- [Dropdowns](#dropdowns)
- [Range sliders](#range-sliders)
{: class="toc"}

<!--Intro-->

<div class="content-50 content-first">


<div class="lead-in">
This page covers use cases, specs, accessibility, and responsive considerations for major form field UI components.

In general, forms should be as simple and direct as possible to minimize scrolling (think mobile first). Keep your queries to a minimum, and ask only what is absolutely needed.  Make inputs as self-explanatory as possible, with a minimum of helper text. Avoid the use of disabled fields where possible, and use progressive disclosure instead.
</div>

</div>


<div class="content-50 content-last">
  <h5 class="repo-list-header">Source Code</h5>
  <ul class="repo-list">
    <li>
      <span class="cf-icon cf-icon-github"></span>
    </li>
    <li>
      <a href="https://github.com/cfpb/capital-framework/tree/canary/src/cf-forms"><h4>cf-forms</h4></a>
      <p>Forms in Capital Framework</p>
    </li>
  </ul>
</div>

<!--**************************************    Text Input fields    **************************************-->

## Text input fields

<div class="content-66 content-first">
#### Usability
Consider matching text input field lengths to the information requested so that users can quickly grasp what's being asked. It’s hard to understand at a glance that a single 1000-px-wide text field is asking for your phone number. A better affordance is three short text fields for area code, prefix, and last four digits.

#### Responsive design
As the viewport resizes to smaller breakpoints, stack and snap text input fields to 100% width when inline fields no longer fit on one line.

#### Accessibility
For screen readers, make sure the tab focus order is correct. Consider the order in which error messages should be read if they fall below the text field.

### States
</div>

<div class="content-50 content-first">

#### Default

- Border: 1 px, Gray 60 (#919395)
- Height: 35 px
- Padding: 7 px
- Text: Avenir Next Regular, 16 px, Gray (#5a5d61)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<input class="a-text-input" placeholder="Placeholder text" type="text">
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Focus

* Border: 2 px, Pacific (#0072ce)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<input class="a-text-input a-text-input__focused" placeholder="Placeholder text" type="text">
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Error

- Border: 2 px, Red (#d14124)
- Error minicon and message should appear below the field (see error messaging below)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<input class="a-text-input a-text-input__error" type="text" value="Invalid input">
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Disabled

- Border: 1 px, Gray 60 (#919395)
- Fill: Gray 5 (#f7f8f9)
- Text: Avenir Next Regular, 16 px, Gray (#5a5d61)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<input class="a-text-input a-text-input__disabled" disabled="true" autocomplete="off" type="text" value="" title="Test input" placeholder="Placeholder text">
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Multi-line

Use for longer-form answers.

- Border: 1 px, Gray 60 (#919395)
- Text: Avenir Next Regular, 16 px, Gray (#5a5d61) 

</div>

<div class="content-50 content-last">

{::nomarkdown}
<textarea class="a-text-input" cols="30" rows="5">Placeholder text</textarea>
{:/nomarkdown}

</div>
<br>
<br>


<!--******************************-    LABELS AND HELPER TEXT     ******************************-->

## Labels and helper text

<!--******   LABELS     **********-->

<div class="content-66 content-first">

### Labels

</div>

<div class="content-50 content-first">

#### Form field labels

- H4 (Avenir Next Medium, 18 px), Black (#101820)
- Text is top aligned
- Margin bottom: 10 px

</div>

<div class="content-50 content-last">
{::nomarkdown}
<label class="a-label a-label__heading">
    Label
</label>
<input class="a-text-input" type="text">
{:/nomarkdown}
</div>

---

<div class="content-50 content-first">

#### Fieldset legend

- H3 (Avenir Next Medium, 22 px), Black (#101820)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<fieldset>
    <legend>Fieldset legend</legend>
    <div class="form-group">
        <div class="form-group_item">
            <label class="a-label" for="name1">
                Label
            </label>
            <input class="a-text-input" type="text" id="name1" value="">
        </div>
        <div class="form-group_item">
            <label class="a-label" for="name2">
                Label
            </label>
            <input class="a-text-input" type="text" id="name2" value="">
        </div>
    </div>
</fieldset>
{:/nomarkdown}

</div>

<!--******   HELPER TEXT     **********-->

<br>

<div class="content-66 content-first">

<h3> Helper text</h3>

</div>

<div class="content-66 content-first">

For screen reader accessibility, consider using the <i>aria-describedby</i> attribute for helper text, which gives users of screen readers the information they need while allowing more flexibility with placement.

</div>

<br>

<div class="content-50 content-first">

#### Block helper text

Use block helper text to explain why a piece of information is being requested, address security and privacy concerns, and suggest ways of providing answers other than providing formatting examples.

- Text: Avenir Next Regular 14 px, Dark Gray (#43484e)
- Margin bottom: 10 px

</div>

<div class="content-50 content-last">

{::nomarkdown}
<label class="a-label a-label__heading" for="helper-example">
    Label
</label>
<label class="form-label-helper-text" for="helper-example">
Use block helper text for instructions.
</label>
<input class="a-text-input" type="text" id="helper-example">
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Inline helper text

Use to indicate whether a field is optional or required.

- Text: Avenir Next Regular, 14 px, Dark Gray (#43484e)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<label class="a-label a-label__heading" for="helper-inline-example">
    Label <span class="form-label-helper-text">(optional)</span>
</label>
<input class="a-text-input" type="text" id="helper-inline-example">
{:/nomarkdown}
</div>

---

<div class="content-50 content-first">

#### Placeholder text

Use placeholder text for formatting examples only. Don’t use for instructions. Once an input field is focused, the placeholder text is lost.

- Text: Avenir Next Regular, 16 px, Gray (#5a5d61)


</div>

<div class="content-50 content-last">

{::nomarkdown}
<div class="form-group">
    <div class="form-group_item">
        <input class="a-text-input" placeholder="e.g. (212) 555-1212" type="text">
    </div>
    <br>
    <div class="form-group_item">
        <input class="a-text-input" placeholder="mm/dd/yyyy" type="text">
    </div>
</div>
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Required vs. optional fields

Where possible, design your forms to include required fields only. Add instructions at the top of the form to clearly indicate that all fields are required unless otherwise noted. If a field is optional, indicate it with inline helper text, as shown here. Don't indicate which fields are required; that would only introduce redundant visual noise.

Try not to design forms consisting mainly of optional fields. If you must do so, mark required field labels only with inline helper text.


</div>

<div class="content-50 content-last">

{::nomarkdown}
<div class="form-group">
    <div class="form-group_item">
        <label class="a-label a-label__heading" for="helper-inline-required">
            Label <span class="form-label-helper-text">(required)</span>
        </label>
        <input class="a-text-input" type="text" id="helper-inline-required">
    </div>
    </br>
    <div class="form-group_item">
        <label class="a-label a-label__heading" for="helper-inline-optional">
            Label <span class="form-label-helper-text">(optional)</span>
        </label>
        <input class="a-text-input" type="text" id="helper-inline-optional">
    </div>
</div>
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Error messaging

- Error minicon and message should appear below the field.

- Text: Avenir Next Regular, 16 px, Gray (#5a5d61)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<img src="{{site.github.url}}/static/img/forms/field-level-alert.png" />
{:/nomarkdown}

</div>



<!--******************************-    VALIDATION     ******************************-->
<br>

## Form validation

<div class="content-66 content-first">

Where possible, correct formatting errors immediately using client-side validation so that the user does not have to wait until submitting to see what went wrong. (This is especially frustrating if the information the user enters the first time around is not cached on submit and they have to fill out all the fields again from scratch.) If letters are entered in a date field, if an email address is missing the “@” sign, let the user know right away—show a field-level error on blur.

That said, it’s a good idea to always validate on the server side even if you use client-side validation for formatting checks. That’s because JavaScript validation may not work on all clients; JavaScript errors could occur no matter the client; and JS validation can easily be bypassed, which raises security concerns.

In general, the best practice for server-side validation is to mark errors with both form-level AND field-level errors.

#### Accessibility
For screen reader accessibility, form-level errors should include anchor links to the problem field in question.

In general, use distinct icons, contrasting colors, prominent placement and text to indicate errors. Don’t rely on just one method, as users can have many different accessibility needs (color blind users, visually impaired users, users with motor control issues).

### Field-level alert

</div>

<div class="content-50 content-first">

#### Error

* Use to indicate a problem with a particular field input

</div> 

<div class="content-50 content-last">

{::nomarkdown}
<img src="{{site.github.url}}/static/img/forms/field-level-alert.png" />
{:/nomarkdown}

<br>

</div>

<div class="content-66 content-first">

### Form-level notifications

</div>

<div class="content-50 content-first">

#### Errors

Use after validating on the server side to call out input errors preventing form submission

- For screen reader accessibility, include anchor links to the fields that need correction
- Place form-level alerts below the form title

</div>

<div class="content-50 content-last">

<!--insert error with links -->
{::nomarkdown}
<img src="{{site.github.url}}/static/img/forms/form-level-errors.png" />
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Action

Use [animated minicons]({{site.github.url}}/brand-guidelines/minicons.html#animation) to reassure the user that an action is functioning as intended.

</div>

<div class="content-50 content-last">

{::nomarkdown}
<img src="{{site.github.url}}/static/img/forms/form-level-action.png" />
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">


#### Success

Use to confirm that the form has been successfully submitted

</div>


<div class="content-50 content-last">

<!--insert this form has been submitted successfully message -->
{::nomarkdown}
<img src="{{site.github.url}}/static/img/forms/form-level-success.png" />
{:/nomarkdown}

</div>



<!--******************************-    CHECKBOXES AND RADIO BUTTONS     ******************************-->


<br>
## Checkboxes and radio buttons

<!--******   CHECKBOXES     **********-->

<div class="content-66 content-first">

<h3>Checkboxes</h3>

Use checkboxes when the user can select more than one option from a list. Make clear with helper text that this is the case.

#### Usability
To optimize usability, consider using <a href="#large-target">checkboxes with large target areas</a>. If these won’t fit into the design and the default style shown below is used, make sure the target area is at least 45 x 45 px and that it includes the text label.

#### Accessibility
To optimize screen reader accessibility, lay out checkboxes vertically rather than horizontally.

<br>

### States
</div>

<div class="content-50 content-first">

#### Default

- 20 x 20 px
- Margin right: 10 px
- Border: 1 px, Gray 60 (#919395)
- Fill: White (#ffffff)
- Text: Avenir Next Regular, 16 px, Gray (#5a5d61)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<div class="m-form-field m-form-field__checkbox">
    <input class="a-checkbox" type="checkbox" id="test_checkbox_1">
    <label class="a-label" for="test_checkbox_1">Option 1</label>
</div>
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Focused/Hover

- Border: 2 px, Pacific (#0072CE)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<div class="m-form-field m-form-field__checkbox">
    <input class="a-checkbox" type="checkbox" id="test_checkbox_2">
    <label class="a-label" for="test_checkbox_2">Option 1</label>
</div>
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Selected

- Border: 1 px, Pacific (#0072CE)
- Fill: 14 x 14 px, Pacific (#0072CE)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<div class="m-form-field m-form-field__checkbox">
    <input class="a-checkbox" type="checkbox" id="test_checkbox_3">
    <label class="a-label" for="test_checkbox_3">Option 1</label>
</div>
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Disabled

- Border: 1 px, Gray 60 (#919395)
- Fill: Gray 80 (#75787b)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<input class="a-checkbox a-checkbox__disabled" type="checkbox">
<label class="a-checkbox a-checkbox__heading">Option 1</label>
{:/nomarkdown}

</div>


<!--******   RADIO BUTTONS     **********-->

<br>
<div class="content-66 content-first">

### Radio buttons

Use radio buttons when the user can choose only one option out of a list. Use these for a small number of discrete elements—avoid long lists of radio buttons. When there are more than two options, stack radio buttons vertically.

#### Usability
Leave radio buttons unselected as the default. It’s easy for users to miss that a radio button has been preselected, and to submit a form with an erroneous answer.

Never use radio buttons for optional questions. Once a radio button is selected from a list, it or another choice must remain selected and there is no going back unless you reload the form.

Consider using <a href="#large-target">radio buttons with large target areas</a>. If these won’t fit into your design and you need to use the default style shown below, make sure the target area is at least 45x45px and includes the option text.


#### Accessibility
For screen readers, be aware that there are some issues with voiceover reading radio buttons. To get around this, consider using the aria-describedby attribute.

### States

</div>

<div class="content-50 content-first">

#### Default

- 20 x 20px
- Margin right: 10 px
- Border: 1 px, Gray 60 (#919395)
- Fill: White (#ffffff)
- Text: Avenir Next Regular, 16 px, Gray (#5a5d61)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<div class="m-form-field m-form-field__radio_1">
    <input class="a-radio" type="radio" id="test_radio">
    <label class="a-label" for="test_radio_1">Option 1</label>
</div>
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Hover/Focused

- Border: 2 px, Pacific (#0072CE)

</div> 

<div class="content-50 content-last">

{::nomarkdown}
<div class="m-form-field m-form-field__radio_2">
    <input class="a-radio" type="radio" id="test_radio">
    <label class="a-label" for="test_radio_2">Option 1</label>
</div>
{:/nomarkdown}

</div>


---

<div class="content-50 content-first">

#### Selected

- Border: 1 px, Pacific (#0072CE)
- Fill: 14 x 14 px, Pacific (#0072CE)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<div class="m-form-field m-form-field__radio">
    <input class="a-radio" type="radio" id="test_radio_3">
    <label class="a-label" for="test_radio_3">Option 1</label>
</div>
{:/nomarkdown}

</div>

---

<div class="content-50 content-first">

#### Disabled

- Border: 1 px, Gray 60 (#919395)
- Fill: Gray 80 (#75787b)

</div>

<div class="content-50 content-last">

{::nomarkdown}
<div class="m-form-field m-form-field__radio_4">
    <input class="a-radio" type="radio" id="test_radio">
    <label class="a-label" for="test_radio_4">Option 1</label>
</div>
{:/nomarkdown}

</div>

<!--******   LARGE TARGET CHECKBOXES AND BUTTONS     **********-->

<br>

<div class="content-66 content-first">

<h3 id="large-target">Checkboxes and radio buttons with large target areas</h3>


{'fraction_non_alphanumeric': 0.1622103386809269, 'fraction_numerical': 0.022770398481973434, 'mean_word_length': 4.101642710472279, 'pattern_counts': {'":': 0, '<': 549, '<?xml version=': 0, '>': 549, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7196326', 'n_tokens_mistral': 11567, 'n_tokens_neox': 10786, 'n_words': 3689}