Forms

Forms, whether standalone or called as the form collection type, can use these well-constructed components.

Input

Example

Primary email

Inputs can have description text.

Options

Props

Name	Description	Example
classes	css classes applied to parent	color--main-dark
description	Longer textual description or help text	Inputs can have description text
label	text as short description of what to fill out	Primary email
name	input name passed as the key for the value in the form	email
required	Whether it is required to fill this out in order to submit the form	true
type	the type attribute to apply to the tag	text

Code

HTML

          
  <div class="form--item form--item--input form--item--input--email ">
    <label class="label form--item--label display--block font-size--p75em" for="email">
      Primary email
      
        <sup class="form--item--required" aria-hidden="true">*</sup>
        <span class="a11y--visually-hidden">required</span>
      
    </label>
    <input name="email" id="email" type="email"
      aria-describedby="email--description" 
      required
    />
    
      <p class="form--item--description" id="email--description">Inputs can have description text.</p>
    
  </div>

Liquid template

          
  {% include forms/form--input.html
    classes=""
    description="Inputs can have description text."
    label="Primary email"
    name="email"
    required=true
    type="email"
  %}

Usage

General guidance

Use the input component for text, tel, email, hidden, or other varieties of the base-level <input> tag.

Accessibility

Form inputs require a matching label that is associated with it either implicitly or by using the for attribute.

Select

Example

Favorite state

A single select uses a dropdown.

Options

Props

Name	Description	Example
classes	css classes applied to parent	color--main-dark
description	Longer textual description or help text	Selects can have description text
label	text as short description of what to fill out	Primary email
multiple	true or false for whether you can choose more than one option	true
name	input name passed as the key for the value in the form	languages
options	A pipe-and-comma-separated list of key/value pairs to choose from	langs
required	Whether it is required to fill this out in order to submit the form	true

Code

HTML

          
  
  
    <div class="form--item form--item--select form--item--select--single ">
      <label class="label form--item--label display--block font-size--p75em" for="states">
        Favorite state
        
      </label>
      <select name="states" id="states"
        aria-describedby="states--description" 
        
      >
        
          
          <option value="AL">Alabama</option>
        
          
          <option value="AK">Alaska</option>
        
          
          <option value="AS">American Samoa</option>
        
          
          <option value="AZ">Arizona</option>
        
          
          <option value="AR">Arkansas</option>
        
          
          <option value="CA">California</option>
        
          
          <option value="CO">Colorado</option>
        
          
          <option value="CT">Connecticut</option>
        
          
          <option value="DE">Delaware</option>
        
          
          <option value="DC">Dist of Columbia</option>
        
          
          <option value="FL">Florida</option>
        
          
          <option value="GA">Georgia</option>
        
          
          <option value="GU">Guam</option>
        
          
          <option value="HI">Hawaii</option>
        
          
          <option value="ID">Idaho</option>
        
          
          <option value="IL">Illinois</option>
        
          
          <option value="IN">Indiana</option>
        
          
          <option value="IA">Iowa</option>
        
          
          <option value="KS">Kansas</option>
        
          
          <option value="KY">Kentucky</option>
        
          
          <option value="LA">Louisiana</option>
        
          
          <option value="ME">Maine</option>
        
          
          <option value="MD">Maryland</option>
        
          
          <option value="MA">Massachusetts</option>
        
          
          <option value="MI">Michigan</option>
        
          
          <option value="MN">Minnesota</option>
        
          
          <option value="UM">Minor Outlying Islands</option>
        
          
          <option value="MS">Mississippi</option>
        
          
          <option value="MO">Missouri</option>
        
          
          <option value="MT">Montana</option>
        
          
          <option value="NE">Nebraska</option>
        
          
          <option value="NV">Nevada</option>
        
          
          <option value="NH">New Hampshire</option>
        
          
          <option value="NJ">New Jersey</option>
        
          
          <option value="NM">New Mexico</option>
        
          
          <option value="NY">New York</option>
        
          
          <option value="NC">North Carolina</option>
        
          
          <option value="ND">North Dakota</option>
        
          
          <option value="MP">Northern Mariana Islands</option>
        
          
          <option value="OH">Ohio</option>
        
          
          <option value="OK">Oklahoma</option>
        
          
          <option value="OR">Oregon</option>
        
          
          <option value="PA">Pennsylvania</option>
        
          
          <option value="PR">Puerto Rico</option>
        
          
          <option value="RI">Rhode Island</option>
        
          
          <option value="SC">South Carolina</option>
        
          
          <option value="SD">South Dakota</option>
        
          
          <option value="TN">Tennessee</option>
        
          
          <option value="TX">Texas</option>
        
          
          <option value="UT">Utah</option>
        
          
          <option value="VT">Vermont</option>
        
          
          <option value="VA">Virginia</option>
        
          
          <option value="VI">U.S. Virgin Islands</option>
        
          
          <option value="WA">Washington</option>
        
          
          <option value="WV">West Virginia</option>
        
          
          <option value="WI">Wisconsin</option>
        
          
          <option value="WY">Wyoming</option>
        
      </select>
      
        <p class="form--item--description" id="states--description">A single select uses a dropdown.</p>
      
    </div>

Liquid template

          
  {% include forms/form--select.html
    classes=""
    description="Users do not love default multi-selects, so this uses checkboxes."
    label="Favorite states"
    multiple=true
    name="states"
    options=states
    required=false
  %}

Usage

General guidance

A select component is used to capture results when you want users to pick from a pre-selected list of options.

If the user is to select one option among many, set the ‘multiple’ prop to false, which will show a <select> dropdown.

If the user can choose more than one option from the list, set ‘multiple’ to true, and the form control will instead be a scrollable list of checkboxes, which is a more pleasant user experience than <select multiple>

To make a list of options to pass into the ‘options’ prop, format a liquid capture like this:

{% capture states %}
AL|Alabama, AK|Alaska, AS|American Samoa, AZ|Arizona, AR|Arkansas,
CA|California, CO|Colorado, CT|Connecticut,
DE|Delaware, DC|Dist of Columbia,
FL|Florida,
GA|Georgia, GU|Guam,
HI|Hawaii,
ID|Idaho, IL|Illinois, IN|Indiana, IA|Iowa,
KS|Kansas, KY|Kentucky,
LA|Louisiana,
ME|Maine, MD|Maryland, MA|Massachusetts, MI|Michigan, MN|Minnesota, UM|Minor Outlying Islands, MS|Mississippi, MO|Missouri, MT|Montana,
NE|Nebraska, NV|Nevada, NH|New Hampshire, NJ|New Jersey, NM|New Mexico, NY|New York, NC|North Carolina, ND|North Dakota, MP|Northern Mariana Islands,
OH|Ohio, OK|Oklahoma, OR|Oregon,
PA|Pennsylvania, PR|Puerto Rico,
RI|Rhode Island,
SC|South Carolina, SD|South Dakota,
TN|Tennessee, TX|Texas,
UT|Utah,
VT|Vermont, VA|Virginia, VI|U.S. Virgin Islands,
WA|Washington, WV|West Virginia, WI|Wisconsin, WY|Wyoming
{% endcapture %}

Each row is a pipe-separated key|value pair, and rows are separated by a comma and a space.

Accessibility

Both checkboxes and the select element are recognized by most assistive technologies. The more you change the markup the greater risk you have of breaking the experience for somebody.

Select

Example

Options

Props

Name	Description	Example
classes	css classes applied to parent	color--main-dark
description	Longer textual description or help text	Selects can have description text
label	text as short description of what to fill out	Primary email
multiple	true or false for whether you can choose more than one option	true
name	input name passed as the key for the value in the form	languages
options	A pipe-and-comma-separated list of key/value pairs to choose from	langs
required	Whether it is required to fill this out in order to submit the form	true

Code

HTML

          
  
  
    <fieldset class="fieldset form--fieldset form--fieldset--select form--item--select--multiple ">
      <legend>Favorite states
        
      </legend>

      <div class="max-height--16 overflow-y--auto">
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--al"
              aria-describedby="states--description" 
              value="AL"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--al">
              Alabama
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--ak"
              aria-describedby="states--description" 
              value="AK"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--ak">
              Alaska
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--as"
              aria-describedby="states--description" 
              value="AS"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--as">
              American Samoa
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--az"
              aria-describedby="states--description" 
              value="AZ"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--az">
              Arizona
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--ar"
              aria-describedby="states--description" 
              value="AR"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--ar">
              Arkansas
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--ca"
              aria-describedby="states--description" 
              value="CA"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--ca">
              California
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--co"
              aria-describedby="states--description" 
              value="CO"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--co">
              Colorado
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--ct"
              aria-describedby="states--description" 
              value="CT"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--ct">
              Connecticut
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--de"
              aria-describedby="states--description" 
              value="DE"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--de">
              Delaware
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--dc"
              aria-describedby="states--description" 
              value="DC"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--dc">
              Dist of Columbia
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--fl"
              aria-describedby="states--description" 
              value="FL"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--fl">
              Florida
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--ga"
              aria-describedby="states--description" 
              value="GA"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--ga">
              Georgia
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--gu"
              aria-describedby="states--description" 
              value="GU"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--gu">
              Guam
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--hi"
              aria-describedby="states--description" 
              value="HI"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--hi">
              Hawaii
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--id"
              aria-describedby="states--description" 
              value="ID"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--id">
              Idaho
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--il"
              aria-describedby="states--description" 
              value="IL"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--il">
              Illinois
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--in"
              aria-describedby="states--description" 
              value="IN"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--in">
              Indiana
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--ia"
              aria-describedby="states--description" 
              value="IA"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--ia">
              Iowa
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--ks"
              aria-describedby="states--description" 
              value="KS"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--ks">
              Kansas
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--ky"
              aria-describedby="states--description" 
              value="KY"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--ky">
              Kentucky
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--la"
              aria-describedby="states--description" 
              value="LA"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--la">
              Louisiana
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--me"
              aria-describedby="states--description" 
              value="ME"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--me">
              Maine
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--md"
              aria-describedby="states--description" 
              value="MD"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--md">
              Maryland
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--ma"
              aria-describedby="states--description" 
              value="MA"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--ma">
              Massachusetts
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--mi"
              aria-describedby="states--description" 
              value="MI"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--mi">
              Michigan
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--mn"
              aria-describedby="states--description" 
              value="MN"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--mn">
              Minnesota
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--um"
              aria-describedby="states--description" 
              value="UM"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--um">
              Minor Outlying Islands
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--ms"
              aria-describedby="states--description" 
              value="MS"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--ms">
              Mississippi
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--mo"
              aria-describedby="states--description" 
              value="MO"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--mo">
              Missouri
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--mt"
              aria-describedby="states--description" 
              value="MT"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--mt">
              Montana
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--ne"
              aria-describedby="states--description" 
              value="NE"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--ne">
              Nebraska
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--nv"
              aria-describedby="states--description" 
              value="NV"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--nv">
              Nevada
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--nh"
              aria-describedby="states--description" 
              value="NH"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--nh">
              New Hampshire
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--nj"
              aria-describedby="states--description" 
              value="NJ"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--nj">
              New Jersey
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--nm"
              aria-describedby="states--description" 
              value="NM"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--nm">
              New Mexico
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--ny"
              aria-describedby="states--description" 
              value="NY"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--ny">
              New York
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--nc"
              aria-describedby="states--description" 
              value="NC"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--nc">
              North Carolina
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--nd"
              aria-describedby="states--description" 
              value="ND"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--nd">
              North Dakota
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--mp"
              aria-describedby="states--description" 
              value="MP"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--mp">
              Northern Mariana Islands
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--oh"
              aria-describedby="states--description" 
              value="OH"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--oh">
              Ohio
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--ok"
              aria-describedby="states--description" 
              value="OK"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--ok">
              Oklahoma
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--or"
              aria-describedby="states--description" 
              value="OR"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--or">
              Oregon
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--pa"
              aria-describedby="states--description" 
              value="PA"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--pa">
              Pennsylvania
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--pr"
              aria-describedby="states--description" 
              value="PR"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--pr">
              Puerto Rico
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--ri"
              aria-describedby="states--description" 
              value="RI"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--ri">
              Rhode Island
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--sc"
              aria-describedby="states--description" 
              value="SC"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--sc">
              South Carolina
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--sd"
              aria-describedby="states--description" 
              value="SD"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--sd">
              South Dakota
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--tn"
              aria-describedby="states--description" 
              value="TN"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--tn">
              Tennessee
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--tx"
              aria-describedby="states--description" 
              value="TX"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--tx">
              Texas
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--ut"
              aria-describedby="states--description" 
              value="UT"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--ut">
              Utah
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--vt"
              aria-describedby="states--description" 
              value="VT"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--vt">
              Vermont
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--va"
              aria-describedby="states--description" 
              value="VA"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--va">
              Virginia
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--vi"
              aria-describedby="states--description" 
              value="VI"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--vi">
              U.S. Virgin Islands
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--wa"
              aria-describedby="states--description" 
              value="WA"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--wa">
              Washington
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--wv"
              aria-describedby="states--description" 
              value="WV"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--wv">
              West Virginia
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--wi"
              aria-describedby="states--description" 
              value="WI"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--wi">
              Wisconsin
            </label>
          </div>
        
          
          <div class="form--item form--item--checkbox position--relative">
            <input type="checkbox" name="states" id="states--wy"
              aria-describedby="states--description" 
              value="WY"
            />
            <label class="label form--item--label display--block font-size--p75em padding-vertical--1"
              for="states--wy">
              Wyoming
            </label>
          </div>
        
      </div>

      
        














  
<div class="spacer padding-vertical--2 "></div>



        
        <div class="text-align--center">
          <div>
            <p class="form--item--description" id="states--description">Users do not love default multi-selects, so this uses checkboxes.</p>
          </div>
        </div>
      
    </fieldset>

Liquid template

          
  {% include forms/form--select.html
    classes=""
    description="Users do not love default multi-selects, so this uses checkboxes."
    label="Favorite states"
    multiple=true
    name="states"
    options=states
    required=false
  %}

Usage

General guidance

A select component is used to capture results when you want users to pick from a pre-selected list of options.

If the user is to select one option among many, set the ‘multiple’ prop to false, which will show a <select> dropdown.

If the user can choose more than one option from the list, set ‘multiple’ to true, and the form control will instead be a scrollable list of checkboxes, which is a more pleasant user experience than <select multiple>

To make a list of options to pass into the ‘options’ prop, format a liquid capture like this:

{% capture states %}
AL|Alabama, AK|Alaska, AS|American Samoa, AZ|Arizona, AR|Arkansas,
CA|California, CO|Colorado, CT|Connecticut,
DE|Delaware, DC|Dist of Columbia,
FL|Florida,
GA|Georgia, GU|Guam,
HI|Hawaii,
ID|Idaho, IL|Illinois, IN|Indiana, IA|Iowa,
KS|Kansas, KY|Kentucky,
LA|Louisiana,
ME|Maine, MD|Maryland, MA|Massachusetts, MI|Michigan, MN|Minnesota, UM|Minor Outlying Islands, MS|Mississippi, MO|Missouri, MT|Montana,
NE|Nebraska, NV|Nevada, NH|New Hampshire, NJ|New Jersey, NM|New Mexico, NY|New York, NC|North Carolina, ND|North Dakota, MP|Northern Mariana Islands,
OH|Ohio, OK|Oklahoma, OR|Oregon,
PA|Pennsylvania, PR|Puerto Rico,
RI|Rhode Island,
SC|South Carolina, SD|South Dakota,
TN|Tennessee, TX|Texas,
UT|Utah,
VT|Vermont, VA|Virginia, VI|U.S. Virgin Islands,
WA|Washington, WV|West Virginia, WI|Wisconsin, WY|Wyoming
{% endcapture %}

Each row is a pipe-separated key|value pair, and rows are separated by a comma and a space.

Accessibility

Both checkboxes and the select element are recognized by most assistive technologies. The more you change the markup the greater risk you have of breaking the experience for somebody.

Yes/No

Example

Répondez s'il vous plaît

Looking forward to it!

With regret

Will you attend the wedding reception dinner on October 9, 2020?

Options

Props

Name	Description	Example
classes	css classes applied to parent	color--main-dark
default	whether the on or off value should be checked by default	on
description	Longer textual description or help text	Inputs can have description text
label	text as short description of what to fill out	Primary email
label_off	Short text for a false-returning answer	No thank you
label_on	Short text for a true-returning answer	Yes please
name	input name passed as the key for the value in the form	email
required	Whether it is required to fill this out in order to submit the form	true

Code

HTML

          
  <fieldset class="fieldset form--fieldset form--fieldset--yes-no ">
    <legend>Répondez s'il vous plaît
      
    </legend>

    <div class="layout--row display--flex flex-direction--row justify-content--space-around">
      <div class="form--item form--item--radio flex--0 margin-vertical--1 position--relative">
        <input type="radio" name="rsvp" id="rsvp--on"
          aria-describedby="rsvp--description" 
          
          value="Yes"
        />
        <label class="label form--item--label display--block font-size--p75em padding-vertical--2"
          for="rsvp--on">
          Looking forward to it!
        </label>
      </div>

      <div class="form--item form--item--radio flex--0 margin-vertical--1 position--relative">
        <input type="radio" name="rsvp" id="rsvp--off"
          aria-describedby="rsvp--description" 
          
          value="No"
        />
        <label class="label form--item--label display--block font-size--p75em padding-vertical--2"
          for="rsvp--off">
          With regret
        </label>
      </div>
    </div>

    
      














  
<div class="spacer padding-vertical--2 "></div>



      
      <div class="text-align--center">
        <div>
          <p class="form--item--description" id="rsvp--description">Will you attend the wedding reception dinner on October 9, 2020?</p>
        </div>
      </div>
    
  </fieldset>

Liquid template

          
  {% include forms/form--yes-no.html
    classes=""
    default=false
    description="Will you attend the wedding reception dinner on October 9, 2020?"
    label="Répondez s'il vous plaît"
    label_off="With regret"
    label_on="Looking forward to it!"
    name="rsvp"
    required=false
  %}

Usage

General guidance

The yes/no component lets you get a clear answer using radio buttons to toggle. This base level control could then be enhanced with JavaScript and styling to be a single switch-style toggle, though that is not strictly necessary.

Accessibility

Radios are recognized by most assistive technologies. The more you change the markup the greater risk you have of breaking the experience for somebody.

Textarea

Example

Commentary

Questions, dietary info, well-wishes, your single greatest piece of advice besides wash-your-hands and wear-sunscreen.

Options

Props

Name	Description	Example
classes	css classes applied to parent	color--main-dark
description	Longer textual description or help text	Inputs can have description text
label	text as short description of what to fill out	Primary email
name	input name passed as the key for the value in the form	email
required	Whether it is required to fill this out in order to submit the form	true
rows	Number of rows for the element. Fewer for shorter anticipated answers	5

Code

HTML

          
  <div class="form--item form--item--textarea ">
    <label class="label form--item--label display--block font-size--p75em" for="comment">
      Commentary
      
    </label>
    <textarea name="comment" id="comment" rows="4"
      aria-describedby="comment--description" 
      
    ></textarea>
    
      <p class="form--item--description" id="comment--description">Questions, dietary info, well-wishes, <em>your single greatest piece of advice besides wash-your-hands and wear-sunscreen</em>.</p>
    
  </div>

Liquid template

          
  {% include forms/form--textarea.html
    classes=""
    description="Questions, dietary info, well-wishes, <em>your single greatest piece of advice besides wash-your-hands and wear-sunscreen</em>."
    label="Commentary"
    name="comment"
    required=false
    rows="4"
    mode="docblock"
  %}

Usage

General guidance

Use the textarea component to receive long textual answers.

Accessibility

Textareas can be finicky.

Input

Example

General guidance

Select

Example

General guidance

Select

Example

General guidance

Yes/No

Example

General guidance

Textarea

Example

General guidance

Copyright, license, and documentation