Questions

Questions patterns can be used in application sections or workflows.

Guidance

  • Must always be contained in the sba-l-content-wrapper--form content wrapper
  • Should include table of contents component
  • Do not use breadcrumbs on workflows
  • The <h1> on the page should always be the title of the page. It should never be a question.

To see some examples of a questionnaire, look at the prototypes:

Support text

Support is placed between the <label> or the <legend> (depending on input type is text or checkbox/radio). This text should contain info that users would most like need to read before providing an answer to the quetsion.

This is the support text

Footnotes

Footnotes contain helpful information, links to CFR, and information that might not be relevant to 80% of users. Mostly, they are used to provide some additional background on a question.

More information

Examples of non-8(a) work include:

  • Non-government/commercial contracts and subcontracts
  • Government work outside of an 8(a) award
  • Multiple award schedule contracts not offered through the 8(a) program

Actions

  • The back button should be at the top of the page since that is where users would mostly likely need to find it.
  • Use consistent actions throughout the form
  • Only use the skip button when skipping is allowed
  • Primary actions can be the default button design, as well as sba-c-button--success or sba-c-button--danger
  • Cancel actions should use sba-c-button--transparent
  • Skip actions should use sba-c-button--inverse

Required vs. optional fields

All fields are required by default. If a field is optional, add "(Optional)" to the label.

Fieldsets

Form fields do not always need to be contained within a <fieldset>. However, it is often recommended to group related fields on any page within a form.

  • Fieldsets should always contain a <legend>.
  • Always use with checkboxes or radios. The <legend> will contain the question.
  • Fieldsets may be nested
What is your address?

Use the address of your primary residence as indicated in your income tax.

Follow-up questions

JS file

Sometimes follow-up questions might be needed if the user selects a particular answer.

What option would like to select? (For radios and checkboxes)
Select box 
<div class="sba-l-content-wrapper--form">
  <div class="sba-c-field-wrap">
    <fieldset>
      <legend>What option would like to select? (For radios and checkboxes)</legend>
      <ul class="sba-c-fields-list sba-c-fields-list--condensed">
        <li>
          <input class="sba-c-radio" id="asdfesde" type="radio" name="s2asdd" value="" >
          <label class="sba-c-label" for="asdfesde">Without a follow-up</label>
        </li>
        <li>
          <input class="sba-c-radio" id="adfekd" type="radio" name="s2asdd" value=" " data-follow-up="q1_a2_followup" aria-controls="q1_a2_followup" aria-expanded="false">
          <label class="sba-c-label" for="adfekd">With a follow-up</label>

          <div class="sba-c-follow-up" id="q1_a2_followup" hidden>
            <div class="sba-c-field-wrap">
              <ul class="sba-c-unstyled-list">
                <li>
                  <label for="">Please tell us why</label>
                  <textarea disabled></textarea>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </fieldset>
    <fieldset>
      <legend>Select box</legend>
      <div class="sba-c-field-wrap">
        <label for="additional_field">Show additional field?</label>
        <select name="additional_field" id="additional_field">
          <option value=""></option>
          <option value="no">No</option>
          <option value="yes" data-followup="additional_field_q" aria-controls="additional_field_q" aria-expanded="false">Yes</option>
        </select>
      <div>
      <div id="additional_field_q" class="sba-c-follow-up" hidden>
        <div class="sba-c-field-wrap">
          <label for="g">What is it?</label>
          <input id="g" name="g" disabled type="text">
        </div>
      </div>
    </fieldset>
  </div>
</div>

Error handling

Validations should be performed on both the front-end and the back-end of the system. The front-end validation enhances user experience, where the page can scroll directly to the error.

The error indication should be as specific as possible, with the errant field marked, rather than the entire set of fields in which it is located.

In general, each form field should be wrapped in a class name of sba-c-field-wrap. When an error occurs, a div is created inside sba-c-field-wrap wrapping all of its contents. The error message becomes the first child of the generated sba-c-form-error.

For text inputs

  • Please provide your first name

<div class="sba-l-content-wrapper--form">
  <ul class="sba-c-fields-list">
    <li>
      <div class="sba-c-field-wrap">
        <div class="sba-c-form-error">
          <p class="sba-c-form-error__message">Please provide your first name</p>
          <label for="fn">First name</label>
          <input id="fn" type="text" required />
        </div>
      </div>
    </li>
    <li>
      <div class="sba-c-field-wrap">
        <label for="ln">Last name</label>
        <input id="ln" type="text" value="Smith" required />
      </div>
    </li>
  </ul>
</div>

For checkboxes and radios

Please select an option

Which option above does your firm choose?

If you choose Option 1, then XYZ. If you choose Option 2, then ABC.

<div class="sba-l-content-wrapper--form">
  <fieldset>
    <div class="sba-c-field-wrap">
      <div class="sba-c-form-error">
        <p class="sba-c-form-error__message">Please select an option</p>
        <legend>Which option above does your firm choose?</legend>
        <p>If you choose Option 1, then XYZ. If you choose Option 2, then ABC.</p>
        <ul class="sba-c-fields-list sba-c-fields-list--condensed">
          <li>
            <input class="sba-c-radio" id="s2_1" type="radio" name="s2" value="" required >
            <label class="sba-c-label" for="s2_1">Option 1</label>
          </li>
          <li>
            <input class="sba-c-radio" id="s2_2" type="radio" name="s2" value="" required >
            <label class="sba-c-label" for="s2_2">Option 2</label>
          </li>
        </ul>
      </div>
    </div>
  </fieldset>
</div>