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.

Masks

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

Date - mm/dd/yy

Birthdate Required Field.

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

Expiration Required Field.

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"]

Home Phone Required Field.

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"]

Home Phone Required Field.

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>

With Button

Useful when a compact layout is needed and the entire form consists of a single input and submit button.

Code Copied

Copy Code

<form class="spirit-form" method="post" action="form/processor">
    <div class="spirit-form__field-group spirit-form__fieldgroup--input-with-button">
        <label class="spirit-form__label" for="email-signup"> 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="email" id="email-signup">
        </div>
        <button type="submit" class="spirit-button spirit-button--extra-small"> Sign Up </button>
    </div>
</form>

With Password Toggle

For password inputs, use the password input with toggle to enable the user to show and hide passwords.

The password toggle button depends on Javascript. See Getting Started for Developers for information on the necessary dependencies.

Code Copied

Copy Code

<div class="spirit-form__input spirit-form__input--password-toggle">
    <input class="spirit-form__input-field" type="password" value="password">
    <button class="spirit-button spirit-form__input-password-toggle spirit-button--icon-only spirit-button--extra-small spirit-button--is-icon spirit-button--minimal" title="toggle password visibility" aria-label="toggle password visibility">
        <svg aria-label="Show" class="spirit-icon spirit-icon--input-helper" aria-hidden="true">
            <use xlink:href="/icons/spirit.svg#eye">
            </use>
        </svg>
        <svg aria-label="Hide" class="spirit-icon spirit-icon--input-helper">
            <use xlink:href="/icons/spirit.svg#eye-off">
                <title>Hide</title>
            </use>
        </svg>
    </button>
</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. One-time donation Monthly recurring donation

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--83152">
        <input id="one-time-donation--83152" 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--91822">
        <input id="monthly-recurring-donation--91822" 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. Red Green Purple

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--84502">
            <input id="red--84502" 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--84664">
            <input id="green--84664" 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--94358">
            <input id="purple--94358" 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. Please don't display my name on the website Please don't display my donation amount on the website

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--55571">
        <input id="please-don&#39;t-display-my-name-on-the-website--55571" 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--10647">
        <input id="please-don&#39;t-display-my-donation-amount-on-the-website--10647" 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? Walking Running Biking

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--73554">
            <input id="walking--73554" 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--63114">
            <input id="running--63114" 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--54334">
            <input id="biking--54334" 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.

I accept the terms and conditions Default

I accept the terms and conditions Checked

I accept the terms and conditions Disabled

I accept the terms and conditions Error

I accept the terms and conditions Indeterminate

Code Copied

Copy Code

<label class="spirit-form__checkbox" for="i-accept-the-terms-and-conditions--48749">
    <input id="i-accept-the-terms-and-conditions--48749" 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--52337">
    <input id="i-accept-the-terms-and-conditions--52337" 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--466">
    <input id="i-accept-the-terms-and-conditions--466" 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--86038">
    <input id="i-accept-the-terms-and-conditions--86038" 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--49135">
    <input id="i-accept-the-terms-and-conditions--49135" 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--49135").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.

use labels written to describe the positive action of checking the box.

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.

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.

City

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.

First Name Required Field.

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.

Middle Initial (Optional)

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.

Search This Site

Code Copied

Copy Code

<div class="spirit-form__field-group">
    <label class="spirit-form__label spirit-form__label--accessibly-hidden" for="search"> Search This Site </label>
    <div class="spirit-form__input">
        <input class="spirit-form__input-field" type="text" id="search" placeholder="Search This Site">
    </div>
</div>

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.

Password Required Field.

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.

Email Address Required Field.

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. One-time donation Monthly recurring donation

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--50586">
        <input id="one-time-donation--50586" 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--35729">
        <input id="monthly-recurring-donation--35729" 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. I have type 1 diabetes Parent or guardian Friend or family member Medical professional

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--45770">
        <input id="i-have-type-1-diabetes--45770" 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--14506">
        <input id="parent-or-guardian--14506" 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--83271">
        <input id="friend-or-family-member--83271" 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--33008">
        <input id="medical-professional--33008" 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>

I accept the terms and conditions 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--35434">
        <input id="i-accept-the-terms-and-conditions--35434" 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.

“Street Address” Required Field.

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>

City Required Field.

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

First Name Required Field.

Last Name Required Field.

Email Required Field.

Billing Address

Street Address Required Field.

Address Line 2 (Optional)

ZIP Code Required Field.

Country Required Field.

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.

First Name Required Field.

Last Name Required Field.

Billing Address

Street Required Field.

ZIP Code Required Field.

City Required Field.

State Required Field.

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.

Forms

Input

Masks

Date - mm/dd/yy

Date - mm/yy

Phone Number - input[type="phone"]

Phone Number - input[type="text"]

With Button

With Password Toggle

Text Area

Radio Group

Stacked

Horizontal

Guidelines

Accessibility

Checkbox Group

Stacked

Horizontal

Checkbox

Guidelines

Accessibility

Select / Dropdown

Label

Required and Optional Indicators

Guidelines

Accessibility

Editorial

Microcopy

Guidelines

Accessibility

Validation Errors

Place error messages below Input, Textarea, and Select.

Place error messages above Radio and Checkbox Groups.

Guidelines

Editorial

Accessibility

Field Group

Fieldset

Form Grid

Guidelines