Indigo Design System v1.2.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.

html
copy-2 Copy to Clipboard 
<input class="indi-form__input" type="text">
html
copy-2 Copy to Clipboard 
<input class="indi-form__input indi-form__input--disabled" type="text" disabled>
  • 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
html
copy-2 Copy to Clipboard 
<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.
html
copy-2 Copy to Clipboard 
<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>
html
copy-2 Copy to Clipboard 
<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.

html
copy-2 Copy to Clipboard 
<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>
html
copy-2 Copy to Clipboard 
<textarea class="indi-form__input indi-form__input--disabled" disabled></textarea>
  • If the answer is only meant to be a few words long or would fit on one line, use a text input.

Date Picker

The date (calendar) picker allows users to easily and quickly select a date from a calendar.

mm/dd/yyyy
calendar
caret-left caret-right
S M T W T F S
html
copy-2 Copy to Clipboard 
<div class="indi-form__input--has-icon">
    <input class="indi-form__input js-object-datepicker" id="datepicker-sinkpage">
    <div class="indi-form__help-text"> mm/dd/yyyy </div>
    <svg class="indi-icon indi-form__input-icon" aria-labelledby="title">
        <title>calendar</title>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/icons/indi_icons.svg#calendar"></use>
    </svg>
    <div class="indi-form__datepicker indi-form__datepicker--is-open">
        <div class="indi-form__datepicker-head">
            <a class="indi-form__datepicker-head-previous" href="#" aria-label="Previous Month">
                <svg class="indi-icon" aria-labelledby="title">
                    <title>caret-left</title>
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/icons/indi_icons.svg#caret-left"> </use>
                </svg>
            </a>
            <span class="indi-form__datepicker-head-month-year">
                <span class="month">August</span>
                <span class="year">2017</span>
            </span>
            <a class="indi-form__datepicker-head-next" href="#" aria-label="Next Month">
                <svg class="indi-icon" aria-labelledby="title">
                    <title>caret-right</title>
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/icons/indi_icons.svg#caret-right"> </use>
                </svg>
            </a>
        </div>
        <table class="indi-form__datepicker-calender">
            <thead>
                <tr>
                    <td>S</td>
                    <td>M</td>
                    <td>T</td>
                    <td>W</td>
                    <td>T</td>
                    <td>F</td>
                    <td>S</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <button aria-label="07/30/2017" class="indi-form__datepicker-previous-month-dates">30</button>
                    </td>
                    <td>
                        <button aria-label="07/31/2017" class="indi-form__datepicker-previous-month-dates">31</button>
                    </td>
                    <td>
                        <button aria-label="08/01/2017">1</button>
                    </td>
                    <td>
                        <button aria-label="08/02/2017">2</button>
                    </td>
                    <td>
                        <button aria-label="08/03/2017">3</button>
                    </td>
                    <td>
                        <button aria-label="08/04/2017">4</button>
                    </td>
                    <td>
                        <button aria-label="08/05/2017">5</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button aria-label="08/06/2017">6</button>
                    </td>
                    <td>
                        <button aria-label="08/07/2017">7</button>
                    </td>
                    <td>
                        <button aria-label="08/08/2017">8</button>
                    </td>
                    <td>
                        <button aria-label="08/09/2017">9</button>
                    </td>
                    <td>
                        <button aria-label="08/10/2017">10</button>
                    </td>
                    <td>
                        <button aria-label="08/11/2017">11</button>
                    </td>
                    <td>
                        <button aria-label="08/12/2017">12</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button aria-label="08/13/2017">13</button>
                    </td>
                    <td>
                        <button aria-label="08/14/2017">14</button>
                    </td>
                    <td>
                        <button aria-label="08/15/2017">15</button>
                    </td>
                    <td>
                        <button aria-label="08/16/2017">16</button>
                    </td>
                    <td>
                        <button aria-label="08/17/2017">17</button>
                    </td>
                    <td>
                        <button aria-label="08/18/2017">18</button>
                    </td>
                    <td>
                        <button aria-label="08/19/2017">19</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button aria-label="08/20/2017">20</button>
                    </td>
                    <td>
                        <button aria-label="08/21/2017">21</button>
                    </td>
                    <td>
                        <button aria-label="08/22/2017">22</button>
                    </td>
                    <td>
                        <button aria-label="08/23/2017">23</button>
                    </td>
                    <td>
                        <button aria-label="08/24/2017">24</button>
                    </td>
                    <td>
                        <button aria-label="08/25/2017">25</button>
                    </td>
                    <td>
                        <button aria-label="08/26/2017">26</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button aria-label="08/27/2017">27</button>
                    </td>
                    <td>
                        <button aria-label="08/28/2017">28</button>
                    </td>
                    <td>
                        <button aria-label="08/29/2017">29</button>
                    </td>
                    <td>
                        <button aria-label="08/30/2017">30</button>
                    </td>
                    <td>
                        <button aria-label="08/31/2017">31</button>
                    </td>
                    <td>
                        <button aria-label="09/01/2017" class="indi-form__datepicker-next-month-dates">1</td>
                    <td>
                        <button aria-label="09/02/2017" class="indi-form__datepicker-next-month-dates">2</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
  • Use the date picker when users need to enter a date that is within a year of the current date.
  • Don’t use for “Date of Birth.”

Accessibility

  • Include aria-label attributes on Date Picker control elements as descriptive lables:
    • <a href="#" class="indi-form__datepicker-head-previous" aria-label="Previous Month"...
    • <a href="#" class="indi-form__datepicker-head-previous" aria-label="Next Month"...
    • <td><button aria-label="08/09/2017"> 9 <button><td>

Radio Button

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

html
copy-2 Copy to Clipboard 
<label class="indi-form__radio-button" for="yes--71658">
    <input id="yes--71658" 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--24436">
    <input id="no--24436" 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>
html
copy-2 Copy to Clipboard 
<label class="indi-form__radio-button indi-form__radio-button--disabled" for="yes--73450">
    <input id="yes--73450" 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--29545">
    <input id="no--29545" 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
html
copy-2 Copy to Clipboard 
<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--46214">
        <input id="mondays--46214" 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--9509">
        <input id="tuesdays--9509" 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--62179">
        <input id="wednesdays--62179" 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--75819">
        <input id="thursdays--75819" 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--74836">
        <input id="fridays--74836" 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
html
copy-2 Copy to Clipboard 
<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--21313">
        <input id="fridays--21313" 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--46026">
        <input id="saturdays--46026" 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--57480">
        <input id="sundays--57480" 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.

html
copy-2 Copy to Clipboard 
<label class="indi-form__checkbox" for="i-accept-the-terms-and-conditions--95380">
    <input id="i-accept-the-terms-and-conditions--95380" 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>
html
copy-2 Copy to Clipboard 
<label class="indi-form__checkbox indi-form__checkbox--disabled" for="i-accept-the-terms-and-conditions--91423">
    <input id="i-accept-the-terms-and-conditions--91423" 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
html
copy-2 Copy to Clipboard 
<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--38990">
        <input id="mondays--38990" 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--24673">
        <input id="tuesdays--24673" 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--70644">
        <input id="wednesdays--70644" 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--27830">
        <input id="thursdays--27830" 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--62026">
        <input id="fridays--62026" 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
html
copy-2 Copy to Clipboard 
<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--49424">
        <input id="fridays--49424" 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--94209">
        <input id="saturdays--94209" 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--45638">
        <input id="sundays--45638" 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/Drop Down

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

caret-down
html
copy-2 Copy to Clipboard 
<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
html
copy-2 Copy to Clipboard 
<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
html
copy-2 Copy to Clipboard 
<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 Input

Use the indi-form__input--file class on file input elements to hide them. File inputs should then be triggered via Javascript by a Primary, Secondary, or Tertiary button component.

html
copy-2 Copy to Clipboard 
<input class="indi-form__input indi-form__input--file" type="file">
  • Use “Choose File” for all upload functions.
  • Don’t use “Browse,” “Browse Files,” “Upload File,” or other variations.

File Upload

The values of the aria-valuenow="50" attribute on the indi-form__percentage-indicator element and the style="width:50%;" attribute on the indi-form__percentage-indicator-bar element need to be updated as the file uploads.

View the Form (File Upload) external-link page example for prototype behavior.

file-pdf customersnapcard .pdf (123k)
html
copy-2 Copy to Clipboard 
<div class="indi-form__file-upload">
    <div class="indi-form__file-upload-cell indi-form__file-upload-cell--percentage">
        <div class="indi-form__percentage-indicator" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
            <span class="indi-form__percentage-indicator-bar" style="width:50%;"></span>
        </div>
    </div>
    <div class="indi-form__file-upload-cell indi-form__file-upload-cell--file">
        <span class="indi-file-object">
            <span class="indi-file-object__grid">
                <span class="indi-file-object__cell indi-file-object__cell--icon">
                    <svg class="indi-icon indi-icon--medium indi-icon--valign-middle indi-file-object__icon" aria-labelledby="title">
                        <title>file-pdf</title>
                        <use xlink:href="/assets/icons/indi_icons.svg#file-pdf">
                    </svg>
                </span>
                <span class="indi-file-object__cell indi-file-object__cell--label" title="customersnapcard"> customersnapcard </span>
                <span class="indi-file-object__cell indi-file-object__cell--file-type"> .pdf </span>
                <span class="indi-file-object__cell indi-file-object__cell--file-size"> (123k) </span>
            </span>
        </span>
    </div>
    <div class="indi-form__file-upload-cell indi-form__file-upload-cell--action">
        <button class="indi-form__file-upload-action" title="Cancel Upload" type="button">
            <svg class="indi-icon indi-icon--small indi-icon--valign-middle" aria-labelledby="title">
                <title>close</title>
                <use xlink:href="/assets/icons/indi_icons.svg#close">
            </svg>
        </button>
    </div>
</div>
file-pdf long-truncated-file-name-123456789 .pdf (123k)
html
copy-2 Copy to Clipboard 
<div class="indi-form__file-upload">
    <div class="indi-form__file-upload-cell indi-form__file-upload-cell--percentage">
        <div class="indi-form__percentage-indicator" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
            <span class="indi-form__percentage-indicator-bar" style="width:50%;"></span>
        </div>
    </div>
    <div class="indi-form__file-upload-cell indi-form__file-upload-cell--file">
        <span class="indi-file-object">
            <span class="indi-file-object__grid">
                <span class="indi-file-object__cell indi-file-object__cell--icon">
                    <svg class="indi-icon indi-icon--medium indi-icon--valign-middle indi-file-object__icon" aria-labelledby="title">
                        <title>file-pdf</title>
                        <use xlink:href="/assets/icons/indi_icons.svg#file-pdf">
                    </svg>
                </span>
                <span class="indi-file-object__cell indi-file-object__cell--label" title="long-truncated-file-name-123456789"> long-truncated-file-name-123456789 </span>
                <span class="indi-file-object__cell indi-file-object__cell--file-type"> .pdf </span>
                <span class="indi-file-object__cell indi-file-object__cell--file-size"> (123k) </span>
            </span>
        </span>
    </div>
</div>
file-doc short-name .doc (10k)
html
copy-2 Copy to Clipboard 
<div class="indi-form__file-upload">
    <div class="indi-form__file-upload-cell">
        <span class="indi-file-object">
            <span class="indi-file-object__grid">
                <span class="indi-file-object__cell indi-file-object__cell--icon">
                    <svg class="indi-icon indi-icon--medium indi-icon--valign-middle indi-file-object__icon" aria-labelledby="title">
                        <title>file-doc</title>
                        <use xlink:href="/assets/icons/indi_icons.svg#file-doc">
                    </svg>
                </span>
                <span class="indi-file-object__cell indi-file-object__cell--label" title="short-file-name"> short-file-name </span>
                <span class="indi-file-object__cell indi-file-object__cell--file-type"> .doc </span>
                <span class="indi-file-object__cell indi-file-object__cell--file-size"> (10k) </span>
            </span>
        </span>
    </div>
    <div class="indi-form__file-upload-cell indi-form__file-upload-cell--action">
        <button class="indi-form__file-upload-action" title="Cancel Upload" type="button">
            <svg class="indi-icon indi-icon--small indi-icon--valign-middle" aria-labelledby="title">
                <title>close</title>
                <use xlink:href="/assets/icons/indi_icons.svg#close">
            </svg>
        </button>
    </div>
</div>
file-pdf customersnapcard .pdf (123k)
html
copy-2 Copy to Clipboard 
<div class="indi-form__file-upload">
    <div class="indi-form__file-upload-cell indi-form__file-upload-cell--percentage">
        <div class="indi-form__percentage-indicator indi-form__percentage-indicator--striped" aria-label="Loading">
            <span class="indi-form__percentage-indicator-bar"></span>
        </div>
    </div>
    <div class="indi-form__file-upload-cell indi-form__file-upload-cell--file">
        <span class="indi-file-object">
            <span class="indi-file-object__grid">
                <span class="indi-file-object__cell indi-file-object__cell--icon">
                    <svg class="indi-icon indi-icon--medium indi-icon--valign-middle indi-file-object__icon" aria-labelledby="title">
                        <title>file-pdf</title>
                        <use xlink:href="/assets/icons/indi_icons.svg#file-pdf">
                    </svg>
                </span>
                <span class="indi-file-object__cell indi-file-object__cell--label" title="customersnapcard"> customersnapcard </span>
                <span class="indi-file-object__cell indi-file-object__cell--file-type"> .pdf </span>
                <span class="indi-file-object__cell indi-file-object__cell--file-size"> (123k) </span>
            </span>
        </span>
    </div>
    <div class="indi-form__file-upload-cell indi-form__file-upload-cell--action">
        <button class="indi-form__file-upload-action" title="Cancel Upload" type="button">
            <svg class="indi-icon indi-icon--small indi-icon--valign-middle" aria-labelledby="title">
                <title>close</title>
                <use xlink:href="/assets/icons/indi_icons.svg#close">
            </svg>
        </button>
    </div>
</div>

Accessibility

  • Add role=”progressbar”, aria-valuenow=”0”, aria-valuemin=”0” and aria-valuemax=”100” attributes to the indi-form__percentage-indicator element.
  • The aria-valuenow value should be updated as the file transfer processes.

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.

html
copy-2 Copy to Clipboard 
<label class="indi-form__label">Primary Address </label>
html
copy-2 Copy to Clipboard 
<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
html
copy-2 Copy to Clipboard 
<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

html
copy-2 Copy to Clipboard 
<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

html
copy-2 Copy to Clipboard 
<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

html
copy-2 Copy to Clipboard 
<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

html
copy-2 Copy to Clipboard 
<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>