Forms

CSS file | JS file

Checkboxes

Checkboxes allow users to select one or more options from a visible list.

<fieldset class="sba-c-fieldset sba-c-fieldset--inputs">
  <legend class="sba-c-legend">Offices</legend>
  <ul class="sba-c-unstyled-list">
    <li>
      <input class="sba-c-checkbox" id="refer_someone_else" type="checkbox" name="currently_with" value="Someone else in your district office" checked>
      <label class="sba-c-label" for="refer_someone_else">Someone in the firm’s district office</label>
    </li>
    <li>
      <input class="sba-c-checkbox" id="refer_district_office" type="checkbox" name="currently_with" value="District office">
      <label class="sba-c-label" for="refer_district_office">Another district office</label>
    </li>
    <li>
      <input class="sba-c-checkbox" id="refer_area_office" type="checkbox" name="currently_with" value="Size">
      <label class="sba-c-label" for="refer_area_office">Size Review</label>
    </li>
    <li>
      <input class="sba-c-checkbox" id="refer_hq" type="checkbox" name="currently_with" value="HQ program" disabled>
      <label class="sba-c-label" for="refer_hq">HQ program</label>
    </li>
  </ul>
</fieldset>

Multi-line example

<input class="sba-c-checkbox" id="assert_approval" type="checkbox" name="approval" value="Has approval" required>
<label class="sba-c-label sba-u-margin-y--0" for="assert_approval"> Nunc mattis ex vel egestas molestie. Sed gravida, augue nec convallis porttitor, ipsum felis semper mauris, non sagittis quam nunc et leo. Aenean efficitur commodo risus, ut consectetur est ullamcorper et. Nullam urna tortor, laoreet efficitur hendrerit in, ultrices et enim.</label>

Accessibility

• Surround a related set of checkboxes with a <fieldset>. The <legend> provides context for the grouping. Do not use fieldset and legend for a single check.
• The custom checkboxes here are accessible to screen readers because the default checkboxes are moved off-screen with position: absolute; left: -999em.
• Each input should have a semantic id attribute, and its corresponding label should have the same value in it’s for attribute.
• The title attribute can replace <label>.

When to use

• When a user can select any number of choices from a set list.
• When a user needs to choose “yes” or “no” on only one option (use a stand-alone checkbox). For example, to toggle a setting on or off.
• When users need to see all the available options at a glance.

When to consider something different

• If there are too many options to display on a mobile screen.
• If a user can only select one option from a list (use radio buttons instead).

Guidelines

• Users should be able to tap on or click on either the text label or the checkbox to select or deselect an option.
• List options vertically if possible; horizontal listings can make it difficult to tell which label pertains to which checkbox.
• Avoid using negative language in labels as they can be counterintuitive. For example, “I want to receive a promotional email” instead of “I don’t want to receive promotional email.”
• If you customize, make sure selections are adequately spaced for touch screens.

Inputs

To avoid conflicts with legacy code and improve semantic markup, the Certify design system recommends making the writing forms differently by putting inputs into sba-c-field-list.

Input ornaments

Use icons as ornaments to provide context about the type of information requested from the user.

<ul class="sba-c-field-list">
  <li>
    <label for="input1">Enter dollar amount</label>
    <div class="sba-c-input-ornament-container">
      <div class="sba-c-input-ornament sba-c-input-ornament--left">
        <svg aria-hidden="true" class="sba-c-icon">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#dollar-sign"></use>
        </svg>
      </div>
      <input type="text" id="input1" class="sba-u-input-width--7">
    </div>
  </li>
  <li>
    <label for="input2">Enter percent</label>
    <div class="sba-c-input-ornament-container">
      <div class="sba-c-input-ornament sba-c-input-ornament--right">
        <svg aria-hidden="true" class="sba-c-icon">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#percent"></use>
        </svg>
      </div>
      <input type="number" id="input2" class="sba-u-input-width--3">
    </div>
  </li>
  <li>
    <label for="input3">Create a tag</label>
    <div class="sba-c-input-ornament-container">
      <div class="sba-c-input-ornament sba-c-input-ornament--left">
        <svg aria-hidden="true" class="sba-c-icon">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#tag"></use>
        </svg>
      </div>
      <input type="text" id="input3">
    </div>
  </li>
</ul>

Follow-ups

Follow-ups are items that are dependent upon selecting a specific answer to another question. Those items may include additional fields, document prompts, tables, or text… or anything that can be placed inside of a div.

While a follow-up is hidden, it will be also be unavailable to screen readers or any devices for non-visual users. All fields are also disabled to prevent any information from being uploaded to the server.

In the example below, select "No" to see the follow-up.

<fieldset class="sba-c-fieldset">
  <legend class="sba-c-legend">Please make a selection</legend>
  <ul class="sba-c-field-list">
    <li>
      <input id="q1_a1" type="radio" name="q1_answers" value="Yes">
      <label for="q1_a1">Yes</label>
    </li>
    <li>
      <input id="q1_a2" type="radio" name="q1_answers" value="No" aria-controls="followup1" data-follow-up="followup1" aria-expanded="false">
      <label for="q1_a2">No</label>
    </li>
  </ul>
</fieldset>
<div class="sba-c-follow-up" id="followup1" hidden>
  <ul class="sba-c-field-list">
    <li>
      <label for="follow_q1">Please explain why</label>
      <input type="text" id="follow_q1" disabled>
    </li>
  </ul>
</div>

Follow-ups can be used on the following form fields:

• Radio buttons
• Checkboxes
• Select box options

A Follow-up can appear anywhere on the page, however, because it’s content length cannot be determined, it should be placed below the fieldset or parent container of the input that controls it to avoid creating large gaps between input sets.

Accessibility

• If a quesiton has a follow-up that is triggered by a response, for example, selecting a specific radio button, include a reference to the follow-up's id with aria-controls and use aria-expanded to indicate whether or not the follow-up is visible.

Adding Documents

Adding documents includes two separate components.

• The document prompt, which describes the document to be added and to indicate if adding a document is optional.
• The document selector, which allows the user to upload or attach existing documents

Document Prompt

The document prompt has three main features:

1. Text that describes what document(s) the user needs add. This supports basic HTML such as <p>, <a> <ul>, and <ol>. Links should open in a new browser tab.
2. A button to launch the document selector
3. An optional line of text to indicate whether an attached document is optional. Only indicate if adding documents is optional. All other cases will be required. There will be no need to indicate that a document is required since that will be the case the majority of the time.

<div class="sba-c-document-prompt">
  <p class="sba-c-document-prompt__header">Please download and fill out <a href="#" target="_blank">SBA Form 1790</a>, then add as a PDF.</p>
  <button class="sba-c-button" type="button" aria-controls="doc_selector1">
    <svg aria-hidden="true" class="sba-c-icon sba-u-margin-right--1">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#file"></use>
    </svg>Add document(s)
  </button>
  <em>Optional</em>
</div>