Forms

Forms gather information from users via inputs, such as text area, radio button, and checkbox. Use field group to wrap each input with helpful labels and indicators, laid out using form grid. Clearly communicate instructions via microcopy and validation errors.

Input

Use input to gather a short string of text or a number. Also known as a text box.

Default
with Placeholder
Disabled
Error
Valid
Code Copied
Copy Code
<div class="spirit-form__input">
    <input class="spirit-form__input-field" type="text">
</div>
<div class="spirit-form__input">
    <input class="spirit-form__input-field" type="text" placeholder="Optional">
</div>
<div class="spirit-form__input">
    <input class="spirit-form__input-field" type="text" disabled>
</div>
<div class="spirit-form__input spirit-form__input--with-icon spirit-form__input--invalid">
    <input class="spirit-form__input-field" type="text">
    <div class="spirit-form__input-icon-wrap">
        <svg aria-label="alert-circle" class="spirit-icon spirit-form__input-icon" aria-hidden="true">
            <use xlink:href="/icons/spirit.svg#alert-circle">
            </use>
        </svg>
    </div>
</div>
<div class="spirit-form__input spirit-form__input--with-icon spirit-form__input--valid">
    <input class="spirit-form__input-field" type="text">
    <div class="spirit-form__input-icon-wrap">
        <svg aria-label="check" class="spirit-icon spirit-form__input-icon" aria-hidden="true">
            <use xlink:href="/icons/spirit.svg#check">
            </use>
        </svg>
    </div>
</div>
  • Use for a single word, number, or line of text. For longer text, use Text Area.
  • Wrap in a Form Group to attach label, microcopy, required indicator, and more.

Input Masks

Masking depends on Javascript. See Getting Started for Developers for information on the necessary dependencies.

Date - mm/dd/yy

Code Copied
Copy Code
<div class="spirit-form__field-group">
    <label class="spirit-form__label"> Birthdate <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
        <span class="spirit-form__label-accessible-text">Required Field.</span>
    </label>
    <div class="spirit-form__input">
        <input class="spirit-form__input-field spirit-form__input--mask spirit-form__input--mask-date" type="text" inputmode="numeric" placeholder="mm/dd/yyyy">
    </div>
</div>

Date - mm/yy

Code Copied
Copy Code
<div class="spirit-form__field-group">
    <label class="spirit-form__label" for="payment-info-cc-expiration"> Expiration <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
        <span class="spirit-form__label-accessible-text">Required Field.</span>
    </label>
    <div class="spirit-form__input">
        <input class="spirit-form__input-field spirit-form__input--mask spirit-form__input--mask-date-mmyy" type="text" inputmode="numeric" id="payment-info-cc-expiration" placeholder="mm/yy">
    </div>
</div>

Phone Number - input[type="phone"]

Code Copied
Copy Code
<div class="spirit-form__field-group">
    <label class="spirit-form__label"> Home Phone <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
        <span class="spirit-form__label-accessible-text">Required Field.</span>
    </label>
    <div class="spirit-form__input">
        <input class="spirit-form__input-field spirit-form__input--mask spirit-form__input--mask-tel" type="tel" placeholder="(___) ___-____">
    </div>
</div>

Phone Number - input[type="text"]

Code Copied
Copy Code
<div class="spirit-form__field-group">
    <label class="spirit-form__label"> Home Phone <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
        <span class="spirit-form__label-accessible-text">Required Field.</span>
    </label>
    <div class="spirit-form__input">
        <input class="spirit-form__input-field spirit-form__input--mask spirit-form__input--mask-tel" type="text" inputmode="numeric" placeholder="(___) ___-____">
    </div>
</div>

Text Area

Use text area to gather multiple lines of text.

Default
with Placeholder
Disabled
Error
Valid
Code Copied
Copy Code
<textarea class="spirit-form__textarea"></textarea>
<textarea class="spirit-form__textarea" placeholder="Optional"></textarea>
<textarea class="spirit-form__textarea" disabled></textarea>
<textarea class="spirit-form__textarea spirit-form__textarea--invalid"></textarea>
<textarea class="spirit-form__textarea spirit-form__textarea--valid"></textarea>
  • Use for long text entry. Although Text Area has no minimum, use Input when expecting only one line of text.
  • Wrap in a Form Group to attach label, microcopy, required indicator, and more.
  • Allow the user to resize the the text area if the browser supports it.

Radio Group

Use radio group to gather a selection from a list of options. Radio groups have two layout options: stacked (default) and horizontal.

Stacked

This is the default and preferred arrangement for a radio group.

Donation Frequency? Required Field.
Code Copied
Copy Code
<fieldset class="spirit-form__radio-group" role="radiogroup">
    <legend class="spirit-form__radio-group-label"> Donation Frequency?<abbr class="spirit-form__label-required-indicator" title="Please select an option." aria-hidden="true">*</abbr>
        <span class="spirit-form__label-accessible-text">Required Field.</span>
    </legend>
    <label class="spirit-form__radio" for="one-time-donation--45248">
        <input id="one-time-donation--45248" name="group-stacked" value="otd" type="radio" class="spirit-form__radio-input" />
        <span class="spirit-form__radio-inner">
            <span class="spirit-form__radio-visual"></span>
            <span class="spirit-form__radio-label "> One-time donation </span>
        </span>
    </label>
    <label class="spirit-form__radio" for="monthly-recurring-donation--23645">
        <input id="monthly-recurring-donation--23645" name="group-stacked" value="monthly" type="radio" class="spirit-form__radio-input" />
        <span class="spirit-form__radio-inner">
            <span class="spirit-form__radio-visual"></span>
            <span class="spirit-form__radio-label "> Monthly recurring donation </span>
        </span>
    </label>
</fieldset>

Horizontal

Use this arrangement when vertical space is at a premium for a few options with very short labels.

Favorite Color Required Field.
Code Copied
Copy Code
<div class="spirit-form__field-group spirit-form__field-group--horizontal">
    <fieldset class="spirit-form__radio-group" role="radiogroup">
        <legend class="spirit-form__radio-group-label"> Favorite Color<abbr class="spirit-form__label-required-indicator" title="Please select an option." aria-hidden="true">*</abbr>
            <span class="spirit-form__label-accessible-text">Required Field.</span>
        </legend>
        <label class="spirit-form__radio" for="red--30774">
            <input id="red--30774" name="group-stacked" value="f00" type="radio" class="spirit-form__radio-input" />
            <span class="spirit-form__radio-inner">
                <span class="spirit-form__radio-visual"></span>
                <span class="spirit-form__radio-label "> Red </span>
            </span>
        </label>
        <label class="spirit-form__radio" for="green--83544">
            <input id="green--83544" name="group-stacked" value="0f0" type="radio" class="spirit-form__radio-input" />
            <span class="spirit-form__radio-inner">
                <span class="spirit-form__radio-visual"></span>
                <span class="spirit-form__radio-label "> Green </span>
            </span>
        </label>
        <label class="spirit-form__radio" for="purple--25052">
            <input id="purple--25052" name="group-stacked" value="f0f" type="radio" class="spirit-form__radio-input" />
            <span class="spirit-form__radio-inner">
                <span class="spirit-form__radio-visual"></span>
                <span class="spirit-form__radio-label "> Purple </span>
            </span>
        </label>
    </fieldset>
</div>

Guidelines

  • Use radio group to gather a selection from a list of 2-5 options.
  • Use radio when offering unfamiliar or lengthy options.
  • Use a Select when presenting a choice of more than 5 options, especially if the options are well known (such as a list of US states).
  • Label a radio group with a legend.
  • Never use a single radio button. Use Checkbox instead.
Accessibility
  • Always include a label, even if adapting radio button for other purposes. Hide the visible label by applying a spirit-screenreader-only class.
  • Use fieldset and legend for grouped Form elements, such as Radio Buttons and Checkboxes.

Checkbox Group

Use checkbox group to gather one or more selections from a list of options. Checkbox groups have two layout options: stacked (default) and horizontal.

Stacked

This is the default and preferred arrangement for a checkbox group.

Public Recognition Required Field.
Code Copied
Copy Code
<fieldset class="spirit-form__checkbox-group" role="group">
    <legend class="spirit-form__checkbox-group-label"> Public Recognition<abbr class="spirit-form__label-required-indicator" title="Please select at least one option." aria-hidden="true">*</abbr>
        <span class="spirit-form__label-accessible-text">Required Field.</span>
    </legend>
    <label class="spirit-form__checkbox" for="please-don&#39;t-display-my-name-on-the-website--88142">
        <input id="please-don&#39;t-display-my-name-on-the-website--88142" type="checkbox" class="spirit-form__checkbox-input" value="no-name" />
        <span class="spirit-form__checkbox-inner">
            <span class="spirit-form__checkbox-visual">
                <svg aria-label="check" class="spirit-icon spirit-form__checkbox-checked-icon" aria-hidden="true">
                    <use xlink:href="/icons/spirit.svg#check">
                    </use>
                </svg>
                <svg aria-label="minus" class="spirit-icon spirit-form__checkbox-indeterminate-icon" aria-hidden="true">
                    <use xlink:href="/icons/spirit.svg#minus">
                    </use>
                </svg>
            </span>
            <span class="spirit-form__checkbox-label"> Please don't display my name on the website </span>
        </span>
    </label>
    <label class="spirit-form__checkbox" for="please-don&#39;t-display-my-donation-amount-on-the-website--49660">
        <input id="please-don&#39;t-display-my-donation-amount-on-the-website--49660" type="checkbox" class="spirit-form__checkbox-input" value="no-amount" />
        <span class="spirit-form__checkbox-inner">
            <span class="spirit-form__checkbox-visual">
                <svg aria-label="check" class="spirit-icon spirit-form__checkbox-checked-icon" aria-hidden="true">
                    <use xlink:href="/icons/spirit.svg#check">
                    </use>
                </svg>
                <svg aria-label="minus" class="spirit-icon spirit-form__checkbox-indeterminate-icon" aria-hidden="true">
                    <use xlink:href="/icons/spirit.svg#minus">
                    </use>
                </svg>
            </span>
            <span class="spirit-form__checkbox-label"> Please don't display my donation amount on the website </span>
        </span>
    </label>
</fieldset>

Horizontal

Use this arrangement when vertical space is at a premium for a few options with very short labels.

What activities do you enjoy?
Code Copied
Copy Code
<div class="spirit-form__field-group spirit-form__field-group--horizontal">
    <fieldset class="spirit-form__checkbox-group" role="group">
        <legend class="spirit-form__checkbox-group-label"> What activities do you enjoy? </legend>
        <label class="spirit-form__checkbox" for="walking--54627">
            <input id="walking--54627" type="checkbox" class="spirit-form__checkbox-input" value="a" />
            <span class="spirit-form__checkbox-inner">
                <span class="spirit-form__checkbox-visual">
                    <svg aria-label="check" class="spirit-icon spirit-form__checkbox-checked-icon" aria-hidden="true">
                        <use xlink:href="/icons/spirit.svg#check">
                        </use>
                    </svg>
                    <svg aria-label="minus" class="spirit-icon spirit-form__checkbox-indeterminate-icon" aria-hidden="true">
                        <use xlink:href="/icons/spirit.svg#minus">
                        </use>
                    </svg>
                </span>
                <span class="spirit-form__checkbox-label"> Walking </span>
            </span>
        </label>
        <label class="spirit-form__checkbox" for="running--29149">
            <input id="running--29149" type="checkbox" class="spirit-form__checkbox-input" value="b" />
            <span class="spirit-form__checkbox-inner">
                <span class="spirit-form__checkbox-visual">
                    <svg aria-label="check" class="spirit-icon spirit-form__checkbox-checked-icon" aria-hidden="true">
                        <use xlink:href="/icons/spirit.svg#check">
                        </use>
                    </svg>
                    <svg aria-label="minus" class="spirit-icon spirit-form__checkbox-indeterminate-icon" aria-hidden="true">
                        <use xlink:href="/icons/spirit.svg#minus">
                        </use>
                    </svg>
                </span>
                <span class="spirit-form__checkbox-label"> Running </span>
            </span>
        </label>
        <label class="spirit-form__checkbox" for="biking--2001">
            <input id="biking--2001" type="checkbox" class="spirit-form__checkbox-input" value="c" />
            <span class="spirit-form__checkbox-inner">
                <span class="spirit-form__checkbox-visual">
                    <svg aria-label="check" class="spirit-icon spirit-form__checkbox-checked-icon" aria-hidden="true">
                        <use xlink:href="/icons/spirit.svg#check">
                        </use>
                    </svg>
                    <svg aria-label="minus" class="spirit-icon spirit-form__checkbox-indeterminate-icon" aria-hidden="true">
                        <use xlink:href="/icons/spirit.svg#minus">
                        </use>
                    </svg>
                </span>
                <span class="spirit-form__checkbox-label"> Biking </span>
            </span>
        </label>
    </fieldset>
</div>

Checkbox

Use an individual checkbox to capture a binary selection. All the states shown are also available within a checkbox group.

Default
Checked
Disabled
Error
Indeterminate
Code Copied
Copy Code
<label class="spirit-form__checkbox" for="i-accept-the-terms-and-conditions--28701">
    <input id="i-accept-the-terms-and-conditions--28701" type="checkbox" class="spirit-form__checkbox-input" />
    <span class="spirit-form__checkbox-inner">
        <span class="spirit-form__checkbox-visual">
            <svg aria-label="check" class="spirit-icon spirit-form__checkbox-checked-icon" aria-hidden="true">
                <use xlink:href="/icons/spirit.svg#check">
                </use>
            </svg>
            <svg aria-label="minus" class="spirit-icon spirit-form__checkbox-indeterminate-icon" aria-hidden="true">
                <use xlink:href="/icons/spirit.svg#minus">
                </use>
            </svg>
        </span>
        <span class="spirit-form__checkbox-label"> I accept the terms and conditions </span>
    </span>
</label>
<label class="spirit-form__checkbox" for="i-accept-the-terms-and-conditions--27301">
    <input id="i-accept-the-terms-and-conditions--27301" type="checkbox" class="spirit-form__checkbox-input" checked />
    <span class="spirit-form__checkbox-inner">
        <span class="spirit-form__checkbox-visual">
            <svg aria-label="check" class="spirit-icon spirit-form__checkbox-checked-icon" aria-hidden="true">
                <use xlink:href="/icons/spirit.svg#check">
                </use>
            </svg>
            <svg aria-label="minus" class="spirit-icon spirit-form__checkbox-indeterminate-icon" aria-hidden="true">
                <use xlink:href="/icons/spirit.svg#minus">
                </use>
            </svg>
        </span>
        <span class="spirit-form__checkbox-label"> I accept the terms and conditions </span>
    </span>
</label>
<label class="spirit-form__checkbox spirit-form__checkbox--disabled" for="i-accept-the-terms-and-conditions--91772">
    <input id="i-accept-the-terms-and-conditions--91772" type="checkbox" class="spirit-form__checkbox-input" disabled />
    <span class="spirit-form__checkbox-inner">
        <span class="spirit-form__checkbox-visual">
            <svg aria-label="check" class="spirit-icon spirit-form__checkbox-checked-icon" aria-hidden="true">
                <use xlink:href="/icons/spirit.svg#check">
                </use>
            </svg>
            <svg aria-label="minus" class="spirit-icon spirit-form__checkbox-indeterminate-icon" aria-hidden="true">
                <use xlink:href="/icons/spirit.svg#minus">
                </use>
            </svg>
        </span>
        <span class="spirit-form__checkbox-label"> I accept the terms and conditions </span>
    </span>
</label>
<label class="spirit-form__checkbox spirit-form__checkbox--invalid" for="i-accept-the-terms-and-conditions--83465">
    <input id="i-accept-the-terms-and-conditions--83465" type="checkbox" class="spirit-form__checkbox-input" />
    <span class="spirit-form__checkbox-inner">
        <span class="spirit-form__checkbox-visual">
            <svg aria-label="check" class="spirit-icon spirit-form__checkbox-checked-icon" aria-hidden="true">
                <use xlink:href="/icons/spirit.svg#check">
                </use>
            </svg>
            <svg aria-label="minus" class="spirit-icon spirit-form__checkbox-indeterminate-icon" aria-hidden="true">
                <use xlink:href="/icons/spirit.svg#minus">
                </use>
            </svg>
        </span>
        <span class="spirit-form__checkbox-label"> I accept the terms and conditions </span>
    </span>
</label>
<label class="spirit-form__checkbox" for="i-accept-the-terms-and-conditions--65511">
    <input id="i-accept-the-terms-and-conditions--65511" type="checkbox" class="spirit-form__checkbox-input" />
    <span class="spirit-form__checkbox-inner">
        <span class="spirit-form__checkbox-visual">
            <svg aria-label="check" class="spirit-icon spirit-form__checkbox-checked-icon" aria-hidden="true">
                <use xlink:href="/icons/spirit.svg#check">
                </use>
            </svg>
            <svg aria-label="minus" class="spirit-icon spirit-form__checkbox-indeterminate-icon" aria-hidden="true">
                <use xlink:href="/icons/spirit.svg#minus">
                </use>
            </svg>
        </span>
        <span class="spirit-form__checkbox-label"> I accept the terms and conditions </span>
    </span>
</label>
<!-- Something like the following Javascript would be required to set an indeterminate state on a checkbox -->
<script>
    document.getElementById("i-accept-the-terms-and-conditions--65511").indeterminate = true;
</script>

Guidelines

  • Use checkbox group to gather one or more selections from a list of options.
  • Optionally, use a single checkbox to set state on a binary question, such as an agreement or setting.
  • Label a checkbox group with a legend.
set all checkboxes unchecked by default. The only exception is confirming or displaying a previous user selection.
set all checkboxes unchecked by default. The only exception is confirming or displaying a previous user selection.
make a choice for the user.
make a choice for the user.
use labels written to describe the positive action of checking the box.
use labels written to describe the positive action of checking the box.
use a negative label. This obscures the meaning of the action.
use a negative label. This obscures the meaning of the action.
Accessibility
  • Always include a label, even if adapting checkbox for other purposes. Hide the visible label by applying a spirit-screenreader-only class.
  • Use fieldset and legend for grouped Form elements, such as Radio Buttons and Checkboxes.

Select / Dropdown

Use a select to capture a selection from a list of options. Unlike a radio button, a user can chose to make no selection.

Default
Code Copied
Copy Code
<div class="spirit-form__select">
    <select class="spirit-form__select-input">
        <option class="spirit-form__select-option" value=""></option>
        <option class="spirit-form__select-option" value="option_1">Credit Card</option>
        <option class="spirit-form__select-option" value="option_2">Check</option>
        <option class="spirit-form__select-option" value="option_3">Paypal</option>
    </select>
    <div class="spirit-form__select-inner"></div>
    <span class="spirit-form__select-open-indicator">
        <svg aria-label="chevron-down" class="spirit-icon spirit-form__select-open-icon" aria-hidden="true">
            <use xlink:href="/icons/spirit.svg#chevron-down">
            </use>
        </svg>
    </span>
</div>
  • Use select when offering several mutually-exclusive options.
  • Ideal for long lists of known items, such as US states.
  • For options with lengthy labels, prefer radio group.

Label

Use to describe a form input and indicate whether the input is required or optional.

Code Copied
Copy Code
<label class="spirit-form__label"> City </label>

Required and Optional Indicators

Use the required indicator to enumerate which fields are required.

Code Copied
Copy Code
<label class="spirit-form__label"> First Name <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
    <span class="spirit-form__label-accessible-text">Required Field.</span>
</label>
  • If most fields are required, yet one or two are optional, use the optional indicator instead. When "Optional" next to the label won’t fit, "Optional" as a Placeholder is preferred, for example Street Address Line 2 when placed on the same row as Street Address Line 1.
Code Copied
Copy Code
<label class="spirit-form__label"> Middle Initial <span class="spirit-form__label-optional"> (Optional) </span>
</label>

Guidelines

Accessibility
  • Use a label with all form inputs, no exceptions. If adapting a form input for an application where the default visible label isn’t needed, hide the visible label with .spirit-screenreader-only. A placeholder does not replace a label — include a hidden label to supplement the placeholder.
  • For required fields, include both the visible required field indicator and the .spirit-screenreader-only required field message. Include a for attribute on each label with a value matching the id attribute on the corresponding input, textarea or select.
Editorial
  • For text inputs, use title case. Avoid punctuation.
  • Clearly written labels should eliminate the need for placeholder text in text boxes and text areas.

Microcopy

Supplement a label with additional instructions, context, or rules.

Must be 5-20 characters.
Code Copied
Copy Code
<div class="spirit-form__field-group">
    <label class="spirit-form__label"> Password <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
        <span class="spirit-form__label-accessible-text">Required Field.</span>
    </label>
    <div class="spirit-form__input">
        <input class="spirit-form__input-field" type="text" placeholder="" aria-describedby="spirit999">
    </div>
    <span class="spirit-form__microcopy" id="spirit999">Must be 5-20 characters.</span>
</div>

Guidelines

Accessibility
  • Include an aria-describedby attribute on each input, textarea, or select that has an .spirit-form__microcopy component providing additional information. The value of the aria-describedby attribute must match the id attribute on the .spirit-form__microcopy component.

Validation Errors

Use to indicate form inputs with missing or invalid entries, and describe the error. Validation errors manifest in specific positions within a field group, as shown below. Use a feedback message a the top of a form to attract the user’s attention to validation errors.

Place error messages below Input, Textarea, and Select.
Invalid email address. Must follow the format `XXXXXX@XXXXXX.XXX`.
Code Copied
Copy Code
<div class="spirit-form__field-group">
    <label class="spirit-form__label"> Email Address <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
        <span class="spirit-form__label-accessible-text">Required Field.</span>
    </label>
    <div class="spirit-form__input spirit-form__input--with-icon spirit-form__input--invalid">
        <input class="spirit-form__input-field" type="text" value="anderson@comcast">
        <div class="spirit-form__input-icon-wrap">
            <svg aria-label="alert-circle" class="spirit-icon spirit-form__input-icon" aria-hidden="true">
                <use xlink:href="/icons/spirit.svg#alert-circle">
                </use>
            </svg>
        </div>
    </div>
    <span class="spirit-form__field-error" id="email-address-error" role="alert">
        <span class="spirit-form__field-error-text"> Invalid email address. Must follow the format `XXXXXX@XXXXXX.XXX`. </span>
    </span>
</div>
Place error messages above Radio and Checkbox Groups.
Donation Frequency? Required Field. This field is required.
Code Copied
Copy Code
<fieldset class="spirit-form__radio-group spirit-form__radio-group--invalid" role="radiogroup">
    <legend class="spirit-form__radio-group-label"> Donation Frequency?<abbr class="spirit-form__label-required-indicator" title="Please select an option." aria-hidden="true">*</abbr>
        <span class="spirit-form__label-accessible-text">Required Field.</span>
    </legend>
    <span class="spirit-form__field-error" id="donation-frequency-error" role="alert">
        <svg aria-label="alert-circle" class="spirit-icon spirit-form__field-error-icon" aria-hidden="true">
            <use xlink:href="/icons/spirit.svg#alert-circle">
            </use>
        </svg>
        <span class="spirit-form__field-error-text"> This field is required. </span>
    </span>
    <label class="spirit-form__radio" for="one-time-donation--32443">
        <input id="one-time-donation--32443" name="group-stacked" value="otd" type="radio" class="spirit-form__radio-input" />
        <span class="spirit-form__radio-inner">
            <span class="spirit-form__radio-visual"></span>
            <span class="spirit-form__radio-label "> One-time donation </span>
        </span>
    </label>
    <label class="spirit-form__radio" for="monthly-recurring-donation--17422">
        <input id="monthly-recurring-donation--17422" name="group-stacked" value="monthly" type="radio" class="spirit-form__radio-input" />
        <span class="spirit-form__radio-inner">
            <span class="spirit-form__radio-visual"></span>
            <span class="spirit-form__radio-label "> Monthly recurring donation </span>
        </span>
    </label>
</fieldset>
What is your connection to type 1 diabetes? Required Field. Select at least one option.
Code Copied
Copy Code
<fieldset class="spirit-form__checkbox-group spirit-form__checkbox-group--invalid" role="group">
    <legend class="spirit-form__checkbox-group-label"> What is your connection to type 1 diabetes?<abbr class="spirit-form__label-required-indicator" title="Please select at least one option." aria-hidden="true">*</abbr>
        <span class="spirit-form__label-accessible-text">Required Field.</span>
    </legend>
    <span class="spirit-form__field-error" id="diabetes-connection-error" role="alert">
        <svg aria-label="alert-circle" class="spirit-icon spirit-form__field-error-icon" aria-hidden="true">
            <use xlink:href="/icons/spirit.svg#alert-circle">
            </use>
        </svg>
        <span class="spirit-form__field-error-text"> Select at least one option. </span>
    </span>
    <label class="spirit-form__checkbox" for="i-have-type-1-diabetes--33888">
        <input id="i-have-type-1-diabetes--33888" type="checkbox" class="spirit-form__checkbox-input" />
        <span class="spirit-form__checkbox-inner">
            <span class="spirit-form__checkbox-visual">
                <svg aria-label="check" class="spirit-icon spirit-form__checkbox-checked-icon" aria-hidden="true">
                    <use xlink:href="/icons/spirit.svg#check">
                    </use>
                </svg>
                <svg aria-label="minus" class="spirit-icon spirit-form__checkbox-indeterminate-icon" aria-hidden="true">
                    <use xlink:href="/icons/spirit.svg#minus">
                    </use>
                </svg>
            </span>
            <span class="spirit-form__checkbox-label"> I have type 1 diabetes </span>
        </span>
    </label>
    <label class="spirit-form__checkbox" for="parent-or-guardian--54716">
        <input id="parent-or-guardian--54716" type="checkbox" class="spirit-form__checkbox-input" />
        <span class="spirit-form__checkbox-inner">
            <span class="spirit-form__checkbox-visual">
                <svg aria-label="check" class="spirit-icon spirit-form__checkbox-checked-icon" aria-hidden="true">
                    <use xlink:href="/icons/spirit.svg#check">
                    </use>
                </svg>
                <svg aria-label="minus" class="spirit-icon spirit-form__checkbox-indeterminate-icon" aria-hidden="true">
                    <use xlink:href="/icons/spirit.svg#minus">
                    </use>
                </svg>
            </span>
            <span class="spirit-form__checkbox-label"> Parent or guardian </span>
        </span>
    </label>
    <label class="spirit-form__checkbox" for="friend-or-family-member--71375">
        <input id="friend-or-family-member--71375" type="checkbox" class="spirit-form__checkbox-input" />
        <span class="spirit-form__checkbox-inner">
            <span class="spirit-form__checkbox-visual">
                <svg aria-label="check" class="spirit-icon spirit-form__checkbox-checked-icon" aria-hidden="true">
                    <use xlink:href="/icons/spirit.svg#check">
                    </use>
                </svg>
                <svg aria-label="minus" class="spirit-icon spirit-form__checkbox-indeterminate-icon" aria-hidden="true">
                    <use xlink:href="/icons/spirit.svg#minus">
                    </use>
                </svg>
            </span>
            <span class="spirit-form__checkbox-label"> Friend or family member </span>
        </span>
    </label>
    <label class="spirit-form__checkbox" for="medical-professional--58812">
        <input id="medical-professional--58812" type="checkbox" class="spirit-form__checkbox-input" />
        <span class="spirit-form__checkbox-inner">
            <span class="spirit-form__checkbox-visual">
                <svg aria-label="check" class="spirit-icon spirit-form__checkbox-checked-icon" aria-hidden="true">
                    <use xlink:href="/icons/spirit.svg#check">
                    </use>
                </svg>
                <svg aria-label="minus" class="spirit-icon spirit-form__checkbox-indeterminate-icon" aria-hidden="true">
                    <use xlink:href="/icons/spirit.svg#minus">
                    </use>
                </svg>
            </span>
            <span class="spirit-form__checkbox-label"> Medical professional </span>
        </span>
    </label>
</fieldset>
You must accept the terms to continue.
Code Copied
Copy Code
<fieldset class="spirit-form__checkbox-group spirit-form__checkbox-group--invalid" role="group">
    <label class="spirit-form__checkbox" for="i-accept-the-terms-and-conditions--9727">
        <input id="i-accept-the-terms-and-conditions--9727" type="checkbox" class="spirit-form__checkbox-input" />
        <span class="spirit-form__checkbox-inner">
            <span class="spirit-form__checkbox-visual">
                <svg aria-label="check" class="spirit-icon spirit-form__checkbox-checked-icon" aria-hidden="true">
                    <use xlink:href="/icons/spirit.svg#check">
                    </use>
                </svg>
                <svg aria-label="minus" class="spirit-icon spirit-form__checkbox-indeterminate-icon" aria-hidden="true">
                    <use xlink:href="/icons/spirit.svg#minus">
                    </use>
                </svg>
            </span>
            <span class="spirit-form__checkbox-label"> I accept the terms and conditions </span>
        </span>
    </label>
    <span class="spirit-form__field-error" id="terms-and-conditions-error" role="alert">
        <svg aria-label="alert-circle" class="spirit-icon spirit-form__field-error-icon" aria-hidden="true">
            <use xlink:href="/icons/spirit.svg#alert-circle">
            </use>
        </svg>
        <span class="spirit-form__field-error-text"> You must accept the terms to continue. </span>
    </span>
</fieldset>

Guidelines

  • Use the error state of each element, such as .spirit-form__input--invalid.
  • Use an error message that appears below each element or label as shown above, styled with .spirit-form__field-error-text.
Editorial
  • Acknowledge what is keeping a user from proceeding, but don’t make them feel like they did something wrong.
  • Provide a user at least one way to resolve the problem.
Accessibility
  • Add aria-invalid="true" to an element where a validation error has occurred.
  • Always include role=alert on .spirit-form__field-error elements.

Field Group

Use field groups to consistently organize the elements that make up an input, including label, microcopy, error messaging, and so on.

Include unit or apartment number.
Code Copied
Copy Code
<div class="spirit-form__field-group">
    <label class="spirit-form__label"> “Street Address” <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
        <span class="spirit-form__label-accessible-text">Required Field.</span>
    </label>
    <div class="spirit-form__input">
        <input class="spirit-form__input-field" type="text">
    </div>
    <span class="spirit-form__microcopy"> Include unit or apartment number. </span>
</div>
This field is required.
Code Copied
Copy Code
<div class="spirit-form__field-group">
    <label class="spirit-form__label"> City <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
        <span class="spirit-form__label-accessible-text">Required Field.</span>
    </label>
    <div class="spirit-form__input spirit-form__input--with-icon spirit-form__input--invalid">
        <input class="spirit-form__input-field" type="text">
        <div class="spirit-form__input-icon-wrap">
            <svg aria-label="alert-circle" class="spirit-icon spirit-form__input-icon" aria-hidden="true">
                <use xlink:href="/icons/spirit.svg#alert-circle">
                </use>
            </svg>
        </div>
    </div>
    <span class="spirit-form__field-error" id="city-error" role="alert">
        <span class="spirit-form__field-error-text"> This field is required. </span>
    </span>
</div>

Fieldset

Use fieldset to break a long form into sections.

Contributor
Billing Address
Code Copied
Copy Code
<form class="spirit-form" method="post" action="form/processor">
    <fieldset class="spirit-form__fieldset">
        <legend class="spirit-form__legend">Contributor</legend>
        <div class="spirit-row">
            <div class="spirit-col-md-6">
                <div class="spirit-form__field-group">
                    <label class="spirit-form__label" for="full-form-first-name"> First Name <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
                        <span class="spirit-form__label-accessible-text">Required Field.</span>
                    </label>
                    <div class="spirit-form__input">
                        <input class="spirit-form__input-field" type="text" id="full-form-first-name">
                    </div>
                </div>
            </div>
            <div class="spirit-col-md-6">
                <div class="spirit-form__field-group">
                    <label class="spirit-form__label" for="full-form-last-name"> Last Name <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
                        <span class="spirit-form__label-accessible-text">Required Field.</span>
                    </label>
                    <div class="spirit-form__input">
                        <input class="spirit-form__input-field" type="text" id="full-form-last-name">
                    </div>
                </div>
            </div>
        </div>
        <div class="spirit-form__field-group">
            <label class="spirit-form__label" for="full-form-email"> Email <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
                <span class="spirit-form__label-accessible-text">Required Field.</span>
            </label>
            <div class="spirit-form__input">
                <input class="spirit-form__input-field" type="text" id="full-form-email">
            </div>
        </div>
    </fieldset>
    <fieldset class="spirit-form__fieldset">
        <legend class="spirit-form__legend">Billing Address</legend>
        <div class="spirit-form__field-group">
            <label class="spirit-form__label" for="full-form-billing-street"> Street Address <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
                <span class="spirit-form__label-accessible-text">Required Field.</span>
            </label>
            <div class="spirit-form__input">
                <input class="spirit-form__input-field" type="text" id="full-form-billing-street">
            </div>
        </div>
        <div class="spirit-form__field-group">
            <label class="spirit-form__label" for="full-form-billing-street2"> Address Line 2 <span class="spirit-form__label-optional"> (Optional) </span>
            </label>
            <div class="spirit-form__input">
                <input class="spirit-form__input-field" type="text" id="full-form-billing-street2">
            </div>
        </div>
        <div class="spirit-row">
            <div class="spirit-col-sm-6 spirit-col-md-4">
                <div class="spirit-form__field-group">
                    <label class="spirit-form__label" for="full-form-billing-zip"> ZIP Code <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
                        <span class="spirit-form__label-accessible-text">Required Field.</span>
                    </label>
                    <div class="spirit-form__input">
                        <input class="spirit-form__input-field" type="text" id="full-form-billing-zip">
                    </div>
                </div>
            </div>
            <div class="spirit-col-sm-6 spirit-col-md-8">
                <div class="spirit-form__field-group">
                    <label class="spirit-form__label" for="full-form-billing-state"> Country <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
                        <span class="spirit-form__label-accessible-text">Required Field.</span>
                    </label>
                    <div class="spirit-form__select">
                        <select class="spirit-form__select-input">
                            <option class="spirit-form__select-option" value=""></option>
                            <option class="spirit-form__select-option" value="1">United States</option>
                            <option class="spirit-form__select-option" value="2">Afghanistan</option>
                            <option class="spirit-form__select-option" value="3">Aland Islands</option>
                            <option class="spirit-form__select-option" value="4">Albania</option>
                            <option class="spirit-form__select-option" value="5">Algeria</option>
                            <option class="spirit-form__select-option" value="6">American Samoa</option>
                            <option class="spirit-form__select-option" value="7">Andorra</option>
                            <option class="spirit-form__select-option" value="8">Angola</option>
                            <option class="spirit-form__select-option" value="9">Anguilla</option>
                            <option class="spirit-form__select-option" value="10">Antarctica</option>
                            <option class="spirit-form__select-option" value="11">Antigua and Barbuda</option>
                            <option class="spirit-form__select-option" value="12">Argentina</option>
                            <option class="spirit-form__select-option" value="13">Armenia</option>
                            <option class="spirit-form__select-option" value="14">Aruba</option>
                            <option class="spirit-form__select-option" value="15">Australia</option>
                            <option class="spirit-form__select-option" value="16">Austria</option>
                            <option class="spirit-form__select-option" value="17">Azerbaijan</option>
                            <option class="spirit-form__select-option" value="18">Bahamas</option>
                            <option class="spirit-form__select-option" value="19">Bahrain</option>
                            <option class="spirit-form__select-option" value="20">Bangladesh</option>
                            <option class="spirit-form__select-option" value="21">Barbados</option>
                            <option class="spirit-form__select-option" value="22">Belarus</option>
                            <option class="spirit-form__select-option" value="23">Belgium</option>
                            <option class="spirit-form__select-option" value="24">Belize</option>
                            <option class="spirit-form__select-option" value="25">Benin</option>
                            <option class="spirit-form__select-option" value="26">Bermuda</option>
                            <option class="spirit-form__select-option" value="27">Bhutan</option>
                        </select>
                        <div class="spirit-form__select-inner"></div>
                        <span class="spirit-form__select-open-indicator">
                            <svg aria-label="chevron-down" class="spirit-icon spirit-form__select-open-icon" aria-hidden="true">
                                <use xlink:href="/icons/spirit.svg#chevron-down">
                                </use>
                            </svg>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</form>

Form Grid

Use the standard grid to lay out forms with multiple inputs per line.

Billing Address
Code Copied
Copy Code
<form class="spirit-form" method="post" action="form/processor">
    <div class="spirit-row">
        <div class="spirit-col-md-6">
            <div class="spirit-form__field-group">
                <label class="spirit-form__label" for="full-form-first-name"> First Name <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
                    <span class="spirit-form__label-accessible-text">Required Field.</span>
                </label>
                <div class="spirit-form__input">
                    <input class="spirit-form__input-field" type="text" id="full-form-first-name">
                </div>
            </div>
        </div>
        <div class="spirit-col-md-6">
            <div class="spirit-form__field-group">
                <label class="spirit-form__label" for="full-form-last-name"> Last Name <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
                    <span class="spirit-form__label-accessible-text">Required Field.</span>
                </label>
                <div class="spirit-form__input">
                    <input class="spirit-form__input-field" type="text" id="full-form-last-name">
                </div>
            </div>
        </div>
    </div>
    <fieldset class="spirit-form__fieldset">
        <legend class="spirit-form__legend">Billing Address</legend>
        <div class="spirit-form__field-group">
            <label class="spirit-form__label" for="full-form-billing-street"> Street <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
                <span class="spirit-form__label-accessible-text">Required Field.</span>
            </label>
            <div class="spirit-form__input">
                <input class="spirit-form__input-field" type="text" id="full-form-billing-street">
            </div>
        </div>
        <div class="spirit-row">
            <div class="spirit-col-sm-6 spirit-col-md-4">
                <div class="spirit-form__field-group">
                    <label class="spirit-form__label" for="full-form-billing-zip"> ZIP Code <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
                        <span class="spirit-form__label-accessible-text">Required Field.</span>
                    </label>
                    <div class="spirit-form__input">
                        <input class="spirit-form__input-field" type="text" id="full-form-billing-zip">
                    </div>
                </div>
            </div>
            <div class="spirit-col-md-4">
                <div class="spirit-form__field-group">
                    <label class="spirit-form__label" for="full-form-billing-city"> City <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
                        <span class="spirit-form__label-accessible-text">Required Field.</span>
                    </label>
                    <div class="spirit-form__input">
                        <input class="spirit-form__input-field" type="text" id="full-form-billing-city">
                    </div>
                </div>
            </div>
            <div class="spirit-col-sm-6 spirit-col-md-4">
                <div class="spirit-form__field-group">
                    <label class="spirit-form__label" for="full-form-billing-state"> State <abbr class="spirit-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
                        <span class="spirit-form__label-accessible-text">Required Field.</span>
                    </label>
                    <div class="spirit-form__select">
                        <select class="spirit-form__select-input">
                            <option class="spirit-form__select-option" value=""></option>
                            <option class="spirit-form__select-option" value="AL">Alabama</option>
                            <option class="spirit-form__select-option" value="AK">Alaska</option>
                            <option class="spirit-form__select-option" value="AZ"> Arizona</option>
                        </select>
                        <div class="spirit-form__select-inner"></div>
                        <span class="spirit-form__select-open-indicator">
                            <svg aria-label="chevron-down" class="spirit-icon spirit-form__select-open-icon" aria-hidden="true">
                                <use xlink:href="/icons/spirit.svg#chevron-down">
                                </use>
                            </svg>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</form>

See Grid for more detailed documentation.

Guidelines

  • Prefer narrow columns of stacked inputs, rather than complex layouts.
  • Use the grid sparingly.
  • Use the grid to place closely-related inputs on a line together, such as State + Zip Code or First Name + Last Name.
  • Never place unrelated inputs on the same line.
  • Consider how a form layout works on narrow viewports and responds on wider viewports.