Indigo Design System v1.0.0

Forms

Electronic forms efficiently and conveniently collect and transfer user data.

Overview

Using consistent input elements builds trust and confidence with users and allows them to quickly and effortlessly complete the forms they need. Each part of a form contributes to the overall experience.

Each form component is designed to ensure consistency across all USAC products.

Text Input

Basic text inputs allow users to type words into a field. Use them in search boxes and form fields that require the user to enter free-text that is only a few words long or would fit on one line.

<input class="indi-form__input" type="text">
  • Text inputs should not span the width of the whole page.
  • If users need to write more than a few words (or what would fit on one line in a text box), use a text area instead.

Help Text

Use help text to describe the field requirements in more detail and/or to help convey formatting requirements for the field.

(xxx) xxx-xxxx
<div class="indi-form__help-text"> eg. (xxx) xxx-xxxx </div>
  • Tooltips are another way to convey additional information about a field.

Error Text

Use errors to notify users that they missed a field/form question or input some information incorrectly.

Subscriber Address is required.
<input class="indi-form__input indi-form__input--has-error" type="text">
<div class="indi-form__input-notification indi-form__input-notification--has-error"> Subscriber Address is required. </div>
<input class="indi-form__input indi-form__input--has-error" type="text">
  • Error messages should be short, informative, and directly connected to the question the user is being asked.
  • By default, always use the error notification with text. There are some exceptions when field specific error notifications are not necessary, most notably when there’s an error associated with the entire group of related form fields. See the Grouping Form Elements guidelines for more details.

Text Area

Text areas allow users to type sentences or paragraphs into a field. Use them when the user needs to input a lot of text to answer a form question.

<textarea class="indi-form__input">Text areas allow users to type sentences or paragraphs into a field. Use them when the user needs to input a lot of text to answer a form question.</textarea>
  • If the answer is only meant to be a few words long or would fit on one line, use a text input.

Radio Button

Use radio buttons when the user has to choose one option. For example, if the user can choose “yes” OR “no.”

<label class="indi-form__radio-button" for="yes--22156">
    <input id="yes--22156" name="Choose One." value="blue" type="radio" class="indi-form__radio-button-input" />
    <span class="indi-form__radio-button-icon"></span>
    <span class="indi-form__radio-button-text "> Yes </span>
</label>
<label class="indi-form__radio-button" for="no--10597">
    <input id="no--10597" name="Choose One." value="blue" type="radio" class="indi-form__radio-button-input" />
    <span class="indi-form__radio-button-icon"></span>
    <span class="indi-form__radio-button-text "> No </span>
</label>
<label class="indi-form__radio-button indi-form__radio-button--disabled" for="yes--95282">
    <input id="yes--95282" name="Choose One." value="blue" type="radio" class="indi-form__radio-button-input" disabled />
    <span class="indi-form__radio-button-icon"></span>
    <span class="indi-form__radio-button-text "> Yes </span>
</label>
<label class="indi-form__radio-button indi-form__radio-button--disabled" for="no--98473">
    <input id="no--98473" name="Choose One." value="blue" type="radio" class="indi-form__radio-button-input" disabled />
    <span class="indi-form__radio-button-icon"></span>
    <span class="indi-form__radio-button-text "> No </span>
</label>
Select a day that works best for you
<fieldset class="indi-form__radio-button-group indi-form__radio-button-group--stacked" role="radiogroup">
    <legend class="indi-form__radio-button-group-label"> Select a day that works best for you </legend>
    <label class="indi-form__radio-button" for="mondays--7358">
        <input id="mondays--7358" name="day-of-the-week-stacked" value="blue" type="radio" class="indi-form__radio-button-input" checked />
        <span class="indi-form__radio-button-icon"></span>
        <span class="indi-form__radio-button-text "> Mondays </span>
    </label>
    <label class="indi-form__radio-button" for="tuesdays--17224">
        <input id="tuesdays--17224" name="day-of-the-week-stacked" value="blue" type="radio" class="indi-form__radio-button-input" />
        <span class="indi-form__radio-button-icon"></span>
        <span class="indi-form__radio-button-text "> Tuesdays </span>
    </label>
    <label class="indi-form__radio-button" for="wednesdays--93979">
        <input id="wednesdays--93979" name="day-of-the-week-stacked" value="blue" type="radio" class="indi-form__radio-button-input" />
        <span class="indi-form__radio-button-icon"></span>
        <span class="indi-form__radio-button-text "> Wednesdays </span>
    </label>
    <label class="indi-form__radio-button" for="thursdays--65956">
        <input id="thursdays--65956" name="day-of-the-week-stacked" value="blue" type="radio" class="indi-form__radio-button-input" />
        <span class="indi-form__radio-button-icon"></span>
        <span class="indi-form__radio-button-text "> Thursdays </span>
    </label>
    <label class="indi-form__radio-button" for="fridays--17615">
        <input id="fridays--17615" name="day-of-the-week-stacked" value="blue" type="radio" class="indi-form__radio-button-input" />
        <span class="indi-form__radio-button-icon"></span>
        <span class="indi-form__radio-button-text "> Fridays </span>
    </label>
</fieldset>
Select a day that works best for you
<fieldset class="indi-form__radio-button-group" role="radiogroup">
    <legend class="indi-form__radio-button-group-label"> Select a day that works best for you </legend>
    <label class="indi-form__radio-button" for="fridays--96741">
        <input id="fridays--96741" name="day-of-the-week" value="blue" type="radio" class="indi-form__radio-button-input" checked />
        <span class="indi-form__radio-button-icon"></span>
        <span class="indi-form__radio-button-text "> Fridays </span>
    </label>
    <label class="indi-form__radio-button" for="saturdays--21568">
        <input id="saturdays--21568" name="day-of-the-week" value="blue" type="radio" class="indi-form__radio-button-input" />
        <span class="indi-form__radio-button-icon"></span>
        <span class="indi-form__radio-button-text "> Saturdays </span>
    </label>
    <label class="indi-form__radio-button" for="sundays--51297">
        <input id="sundays--51297" name="day-of-the-week" value="blue" type="radio" class="indi-form__radio-button-input" />
        <span class="indi-form__radio-button-icon"></span>
        <span class="indi-form__radio-button-text "> Sundays </span>
    </label>
</fieldset>
  • If you have 2 options for the user to choose from, use the horizontal group.
  • If you have 3+ options, use the stacked group. Only use the horizontal group when there’s a strong need to reduce vertical space. Horizontal lists are less scan-able and usable than stacked lists.
  • Never use one radio button alone. Radio buttons should always be an “or” answer, so the user should be choosing from at least 2 options.

Checkbox

Use checkboxes whenever the user has the option to select more than one answer. Or, you can use one check box alone to have users accept or note certain things such as acknowledging a certification.

<label class="indi-form__checkbox" for="i-accept-the-terms-and-conditions--19979">
    <input id="i-accept-the-terms-and-conditions--19979" type="checkbox" class="indi-form__checkbox-input" />
    <span class="indi-form__checkbox-icon"></span>
    <span class="indi-form__checkbox-text"> I accept the terms and conditions </span>
</label>
<label class="indi-form__checkbox indi-form__checkbox--disabled" for="i-accept-the-terms-and-conditions--93266">
    <input id="i-accept-the-terms-and-conditions--93266" type="checkbox" class="indi-form__checkbox-input" disabled />
    <span class="indi-form__checkbox-icon"></span>
    <span class="indi-form__checkbox-text"> I accept the terms and conditions </span>
</label>
Select all the days that apply
<fieldset class="indi-form__checkbox-group indi-form__checkbox-group--stacked" role="group">
    <legend class="indi-form__checkbox-group-label"> Select all the days that apply </legend>
    <label class="indi-form__checkbox" for="mondays--57150">
        <input id="mondays--57150" type="checkbox" class="indi-form__checkbox-input" />
        <span class="indi-form__checkbox-icon"></span>
        <span class="indi-form__checkbox-text"> Mondays </span>
    </label>
    <label class="indi-form__checkbox" for="tuesdays--95132">
        <input id="tuesdays--95132" type="checkbox" class="indi-form__checkbox-input" />
        <span class="indi-form__checkbox-icon"></span>
        <span class="indi-form__checkbox-text"> Tuesdays </span>
    </label>
    <label class="indi-form__checkbox" for="wednesdays--73687">
        <input id="wednesdays--73687" type="checkbox" class="indi-form__checkbox-input" />
        <span class="indi-form__checkbox-icon"></span>
        <span class="indi-form__checkbox-text"> Wednesdays </span>
    </label>
    <label class="indi-form__checkbox" for="thursdays--31875">
        <input id="thursdays--31875" type="checkbox" class="indi-form__checkbox-input" />
        <span class="indi-form__checkbox-icon"></span>
        <span class="indi-form__checkbox-text"> Thursdays </span>
    </label>
    <label class="indi-form__checkbox" for="fridays--45103">
        <input id="fridays--45103" type="checkbox" class="indi-form__checkbox-input" />
        <span class="indi-form__checkbox-icon"></span>
        <span class="indi-form__checkbox-text"> Fridays </span>
    </label>
</fieldset>
Select all the days that apply
<fieldset class="indi-form__checkbox-group" role="group">
    <legend class="indi-form__checkbox-group-label"> Select all the days that apply </legend>
    <label class="indi-form__checkbox" for="fridays--7061">
        <input id="fridays--7061" type="checkbox" class="indi-form__checkbox-input" />
        <span class="indi-form__checkbox-icon"></span>
        <span class="indi-form__checkbox-text"> Fridays </span>
    </label>
    <label class="indi-form__checkbox" for="saturdays--81009">
        <input id="saturdays--81009" type="checkbox" class="indi-form__checkbox-input" />
        <span class="indi-form__checkbox-icon"></span>
        <span class="indi-form__checkbox-text"> Saturdays </span>
    </label>
    <label class="indi-form__checkbox" for="sundays--39946">
        <input id="sundays--39946" type="checkbox" class="indi-form__checkbox-input" />
        <span class="indi-form__checkbox-icon"></span>
        <span class="indi-form__checkbox-text"> Sundays </span>
    </label>
</fieldset>
  • If you have 2 options for the user to choose from, use the horizontal group.
  • If you have more than 2 options, use the stacked group. Only use the horizontal group when there’s a strong need to reduce vertical space. Horizontal lists are less scan-able and usable than stacked lists.

Select

Use the select element to present a menu of options with a single selection.

caret-down
<div class="indi-form__select">
    <select class="indi-form__select-input">
        <option class="indi-form__select-option" value="">Select an option</option>
        <option class="indi-form__select-option" value="option_1">Option 1</option>
        <option class="indi-form__select-option" value="option_2">Option 2</option>
    </select>
    <svg class="indi-icon indi-form__select-open-icon" aria-labelledby="title">
        <title>caret-down</title>
        <use xlink:href="/assets/icons/indi_icons.svg#caret-down">
    </svg>
</div>
caret-down
<div class="indi-form__select indi-form__select--disabled">
    <select class="indi-form__select-input">
        <option class="indi-form__select-option" value="">Select an option</option>
        <option class="indi-form__select-option" value="option_1">Option 1</option>
        <option class="indi-form__select-option" value="option_2">Option 2</option>
    </select>
    <svg class="indi-icon indi-form__select-open-icon" aria-labelledby="title">
        <title>caret-down</title>
        <use xlink:href="/assets/icons/indi_icons.svg#caret-down">
    </svg>
</div>
caret-down
<div class="indi-form__select indi-form__input--has-error">
    <select class="indi-form__select-input">
        <option class="indi-form__select-option" value="">Select an option</option>
        <option class="indi-form__select-option" value="option_1">Option 1</option>
        <option class="indi-form__select-option" value="option_2">Option 2</option>
    </select>
    <svg class="indi-icon indi-form__select-open-icon" aria-labelledby="title">
        <title>caret-down</title>
        <use xlink:href="/assets/icons/indi_icons.svg#caret-down">
    </svg>
</div>

File Upload

Use an indi-form__input--file class on file upload inputs to hide them. File upload inputs should be triggered via Javascript by a button component.

<input class="indi-form__input indi-form__input--file" type="file">

Label

Use labels to accompany virtually all form elements and place them above the associated input field. This ensures the layout of elements will scale on smaller screen resolutions.

<label class="indi-form__label">Primary Address </label>
<label class="indi-form__label">Label
    <span class="indi-form__label-optional-indicator">(optional)</span>
</label>

Grouping Form Elements

Legend and Fieldset

Grouping related fields helps the user more easily digest the information being asked of them and stay on track.

The legend and fieldset component allows us to group several form elements together under a higher level question or a distinct label (i.e., a legend). Use the legend and fieldset component to group related form questions, such as Mailing Address, Personal Information, or Preferences. Contain groupings within a light gray background with a colored top border to create more prominent visual separation between chunks of a larger form.

Personal Information
Legend
<fieldset class="indi-form__fieldset">
    <div class="indi-form__fieldset-title">
        <legend class="indi-form__fieldset-legend">Legend</legend>
    </div>
</fieldset>
  • This component includes markup and style for the containing background color, top-border, and legend styling but does not, by itself, align and arrange the fields. Horizontal alignment of fields happens by sizing the elements within a Form grid.

Form Input Grid

The input grid is a form specific grid system that provides percentage based cell widths of thirds and fourths in order to display related input fields in a row. All input fields will be 100% width on small screens (below 768px viewport width).

  • All indi-form__input-group cell elements must be inside an indi-form__input-row element.
  • Only indi-form__input-group cells should be direct descendants of indi-form__input-row elements.
  • Cell widths are defined by modifier classes added to the cell element. For example, a cell with an indi-form__input-group--1-3 class will be 1/3 width.

Cell Width - Thirds

<div class="indi-form__input-row">
    <div class="indi-form__input-group indi-form__input-group--1-3">
        <input class="indi-form__input" type="text" value="1/3 Cell"> </div>
    <div class="indi-form__input-group indi-form__input-group--1-3">
        <input class="indi-form__input" type="text" value="1/3 Cell"> </div>
    <div class="indi-form__input-group indi-form__input-group--1-3">
        <input class="indi-form__input" type="text" value="1/3 Cell"> </div>
    <div class="indi-form__input-group indi-form__input-group--1-3">
        <input class="indi-form__input" type="text" value="1/3 Cell"> </div>
    <div class="indi-form__input-group indi-form__input-group--2-3">
        <input class="indi-form__input" type="text" value="2/3 Cell"> </div>
</div>

Cell Width - Fourths

<div class="indi-form__input-row">
    <div class="indi-form__input-group indi-form__input-group--1-4">
        <input class="indi-form__input" type="text" value="1/4 Cell"> </div>
    <div class="indi-form__input-group indi-form__input-group--1-4">
        <input class="indi-form__input" type="text" value="1/4 Cell"> </div>
    <div class="indi-form__input-group indi-form__input-group--1-4">
        <input class="indi-form__input" type="text" value="1/4 Cell"> </div>
    <div class="indi-form__input-group indi-form__input-group--1-4">
        <input class="indi-form__input" type="text" value="1/4 Cell"> </div>
    <div class="indi-form__input-group indi-form__input-group--1-2">
        <input class="indi-form__input" type="text" value="1/2 Cell"> </div>
    <div class="indi-form__input-group indi-form__input-group--1-2">
        <input class="indi-form__input" type="text" value="1/2 Cell"> </div>
    <div class="indi-form__input-group indi-form__input-group--1-4">
        <input class="indi-form__input" type="text" value="1/4 Cell"> </div>
    <div class="indi-form__input-group indi-form__input-group--3-4">
        <input class="indi-form__input" type="text" value="3/4 Cell"> </div>
</div>

Cell Offsets

The offset modifier classes provide a way to add space to the right of an input group in a row.

Cell Offset - Thirds

<div class="indi-form__input-row">
    <div class="indi-form__input-group indi-form__input-group--1-3 indi-form__input-group--offset-1-3">
        <input class="indi-form__input" type="text" value="1/3 Cell with 1/3 Offset"> </div>
    <div class="indi-form__input-group indi-form__input-group--1-3">
        <input class="indi-form__input" type="text" value="1/3 Cell"> </div>
    <div class="indi-form__input-group indi-form__input-group--1-3 indi-form__input-group--offset-2-3">
        <input class="indi-form__input" type="text" value="1/3 Cell with 2/3 Offset"> </div>
    <div class="indi-form__input-group indi-form__input-group--2-3 indi-form__input-group--offset-1-3">
        <input class="indi-form__input" type="text" value="2/3 Cell with 1/3 Offset"> </div>
</div>

Cell Offset - Fourths

<div class="indi-form__input-row">
    <div class="indi-form__input-group indi-form__input-group--1-2 indi-form__input-group--offset-1-4">
        <input class="indi-form__input" type="text" value="1/2 Cell with 1/4 Offset"> </div>
    <div class="indi-form__input-group indi-form__input-group--1-4">
        <input class="indi-form__input" type="text" value="1/4 Cell"> </div>
    <div class="indi-form__input-group indi-form__input-group--1-4 indi-form__input-group--offset-3-4">
        <input class="indi-form__input" type="text" value="1/4 Cell with 3/4 Offset"> </div>
    <div class="indi-form__input-group indi-form__input-group--3-4 indi-form__input-group--offset-1-4">
        <input class="indi-form__input" type="text" value="3/4 Cell with 1/4 Offset"> </div>
</div>