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.

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.

Utility (external) navigation

Input

Example

General guidance

Yes/No

Example

General guidance

Textarea

Example

General guidance

Copyright, license, and documentation