Forms
Forms contain several elements.
Source:
forms/_forms.scss, line 92
Labels
Use the label class to identify a form element. Use the grid to aid in positioning the label in the layout.
Labels require specific markup and element arrtibutes to make them accessible. For more detail check the markup, aria-labelledby and aria-describedby
Examples
Default styling
Do You Use Your Powers For Good?
.label--inline
Keeps radio buttons and/or checkboxes, wrapped in a label, on the same line.
Do You Use Your Powers For Good?
.label--light
Lightens the label text.
Do You Use Your Powers For Good?
Markup: forms/forms-label.html
<div class="grid">
<div class="grid__row grid__row--padded">
<div class="
grid__col--lg-4
grid__col--md-4
grid__col--sm-12
grid__col--xs-12
">
<p id="labels-[modifier class]-group">Do You Use Your Powers For Good?</p>
<div role="radiogroup" aria-labelledby="labels-[modifier class]-group">
<label class="label [modifier class]" for="label-always-[modifier class]">
<input
class="radio"
id="label-always-[modifier class]"
type="radio"
name="good-powers"
/>
Always!
</label>
<label class="label [modifier class]" for="label-never-[modifier class]">
<input
class="radio"
id="label-never-[modifier class]"
type="radio"
name="good-powers"
/>
Never!
</label>
<label class="label [modifier class]" for="label-sometimes-[modifier class]">
<input
class="radio"
id="label-sometimes-[modifier class]"
type="radio"
name="good-powers"
/>
Sometimes...
</label>
</div>
</div>
</div>
</div>
Source:
forms/_forms.scss, line 98
Example
Markup: forms/forms-input.html
<label class="label" for="inputs">
Where do you fight crime?
<input
type="text"
class="input"
placeholder="What cities? Just put N/A if this isn't your thing."
id="inputs"
/>
</label>
Source:
forms/_forms.scss, line 115
Example
What Compensation Do You Expect for Using Your Powers?
Markup: forms/forms-checkbox.html
<div class="
grid__col--lg-5
grid__col--md-5
grid__col--sm-12
grid__col--xs-12
">
<p>What Compensation Do You Expect for Using Your Powers?</p>
<div>
<div class="grid__row grid__row--padded">
<div class="grid__col grid__col--xs-12">
<label class="label label--inline label--light" for="checkbox-money">
<input class="checkbox" id="checkbox-money" type="checkbox" />
Money Money... MONEY!
</label>
</div>
</div>
<div class="grid__row grid__row--padded">
<div class="grid__col grid__col--xs-12">
<label class="label label--inline label--light" for="checkbox-contribution">
<input class="checkbox" id="checkbox-contribution" type="checkbox" />
My contribution to society is enough compensation.
</label>
</div>
</div>
<div class="grid__row grid__row--padded">
<div class="grid__col grid__col--xs-12">
<label class="label label--inline label--light" for="checkbox-access">
<input class="checkbox" id="checkbox-access" type="checkbox" />
Access to secrets and elite members of society wouldn't hurt.
</label>
</div>
</div>
</div>
<div class="grid__row grid__row--padded">
<div class="grid__col grid__col--xs-12">
<label class="label label--inline label--light">
<input class="checkbox" type="checkbox" />
I WANA BE FAMOUS!
</label>
</div>
</div>
</div>
</div>
Source:
forms/_forms.scss, line 121
Example
Do You Use Your Powers For Good?
Markup: forms/forms-radio.html
<div class="grid">
<div class="grid__row grid__row--padded">
<div class="
grid__col--lg-4
grid__col--md-4
grid__col--sm-12
grid__col--xs-12
">
<p id="radios--group">Do You Use Your Powers For Good?</p>
<div role="radiogroup" aria-labelledby="radios--group">
<label class="label label--inline label--light" for="radio-always">
<input class="radio" id="radio-always" type="radio" name="good-powers" />
Always!
</label>
<label class="label label--inline label--light" for="radio-never">
<input class="radio" id="radio-never" type="radio" name="good-powers" />
Never!
</label>
<label class="label label--inline label--light" for="radio-sometimes">
<input class="radio" id="radio-sometimes" type="radio" name="good-powers" />
Sometimes...
</label>
</div>
</div>
</div>
</div>
Source:
forms/_forms.scss, line 127
Example
Use toggles when the user needs to turn something on and off like a light switch.
A small toggle
A medium toggle
A large toggle
A toggle with text options
A disabled toggle
Markup: forms/forms-toggle.html
<h3>
Use toggles when the user needs to turn something
on and off like a light switch.
</h3>
<p>
A small toggle
<div class="toggle toggle--sm" id="toggle-sm-switch">
<input type="checkbox" id="toggle-sm-input" class="toggle__input">
<label class="toggle__label" for="toggle-sm-input">
<span class="toggle__screenreader-message">Toggle this option</span>
<span class="toggle__switch" aria-hidden="true">
<span class="toggle__switch-option toggle__switch-option--on" aria-hidden="true">
<svg class="icon icon--sm"><use xlink:href="#ei-check"></use></svg>
</span>
<span class="toggle__switch-option toggle__switch-option--off" aria-hidden="true">
<svg class="icon icon--sm"><use xlink:href="#ei-close-o"></use></svg>
</span>
</span>
</label>
</div>
</p>
<p>
A medium toggle
<div class="toggle toggle--md" id="toggle-md-switch">
<input type="checkbox" id="toggle-md-input" class="toggle__input">
<label class="toggle__label" for="toggle-md-input">
<span class="toggle__screenreader-message">Toggle this option</span>
<span class="toggle__switch" aria-hidden="true">
<span class="toggle__switch-option toggle__switch-option--on" aria-hidden="true">
<svg class="icon icon--md"><use xlink:href="#ei-check"></use></svg>
</span>
<span class="toggle__switch-option toggle__switch-option--off" aria-hidden="true">
<svg class="icon icon--md"><use xlink:href="#ei-close-o"></use></svg>
</span>
</span>
</label>
</div>
</p>
<p>
A large toggle
<div class="toggle toggle--lg" id="toggle-lg-switch">
<input type="checkbox" id="toggle-lg-input" class="toggle__input">
<label class="toggle__label" for="toggle-lg-input">
<span class="toggle__screenreader-message">Toggle this option</span>
<span class="toggle__switch" aria-hidden="true">
<span class="toggle__switch-option toggle__switch-option--on" aria-hidden="true">
<svg class="icon icon--lg"><use xlink:href="#ei-check"></use></svg>
</span>
<span class="toggle__switch-option toggle__switch-option--off" aria-hidden="true">
<svg class="icon icon--lg"><use xlink:href="#ei-close-o"></use></svg>
</span>
</span>
</label>
</div>
</p>
<p>
A toggle with text options
<div class="toggle toggle--lg" id="toggle-text">
<input type="checkbox" id="toggle-text-switch" class="toggle__input">
<label class="toggle__label" for="toggle-text-switch">
<span class="toggle__screenreader-message">Toggle this option</span>
<span class="toggle__switch" aria-hidden="true">
<span class="toggle__switch-option toggle__switch-option--on" aria-hidden="true">
ON
</span>
<span class="toggle__switch-option toggle__switch-option--off" aria-hidden="true">
OFF
</span>
</span>
</label>
</div>
</p>
<p>
A disabled toggle
<div class="toggle toggle--lg">
<input type="checkbox" id="toggle-input-disabled" class="toggle__input" disabled>
<label class="toggle__label" for="toggle-input-disabled">
<span class="toggle__screenreader-message">Toggle this option</span>
<span
class="toggle__disabled-message"
data-checked="On"
data-unchecked="Off"
aria-hidden="true"
></span>
<span class="toggle__switch" aria-hidden="true">
<span class="toggle__switch-option toggle__switch-option--on" aria-hidden="true">
<svg class="icon icon--lg"><use xlink:href="#ei-check"></use></svg>
</span>
<span class="toggle__switch-option toggle__switch-option--off" aria-hidden="true">
<svg class="icon icon--lg"><use xlink:href="#ei-close-o"></use></svg>
</span>
</span>
</label>
</div>
</p>
Source:
forms/_forms.scss, line 133
Examples
Default styling
.select--full-width
Gives the select the width of its container.
.select--inline
Allows the select to be on the same line as other elements.
Markup: forms/forms-select.html
<label class="label" for="[modifier class]a">Select Costume Color Scheme</label>
<select class="select [modifier class]" id="[modifier class]a">
<optgroup label="Standard">
<option value="rnb">Red and Blue</option>
<option value="bng">Black and Grey</option>
</optgroup>
<optgroup label="Screaming For Attention">
<option value="hp">Hot Pink</option>
<option value="ny">Neon Yellow</option>
</optgroup>
</select>
Source:
forms/_forms.scss, line 139
Examples
Default styling
.textarea--full-width
Gives the textarea the width of its container.
Markup: forms/forms-textarea.html
<label class="label" for="[modifier class]-textareas">What's a hero?</label>
<textarea id="[modifier class]-textareas" class="textarea [modifier class]" rows="4">A hero can be anyone. Someone like you. Someone who'll rattle the cages. I seek the means to fight injustice. To turn fear against those who prey on the fearful. My anger outweights my guilt. I will go back to Gotham and I will fight people Iike this but I will not become an executioner.</textarea>
Source:
forms/_forms.scss, line 148
Example
Default
With the fieldset and fieldset__legend classes.
Markup: forms/forms-fieldset.html
<p>Default </p>
<fieldset>
<legend>Super Powers Info</legend>
<label class="label" for="fieldset-alias-default">Super Power Alias</label>
<input class="input" type="text" id="fieldset-alias-default" />
</fieldset>
<p>
With the <strong>fieldset</strong> and <strong>fieldset__legend</strong> classes.
</p>
<fieldset class="fieldset">
<legend class="fieldset__legend">Super Powers Info</legend>
<label class="label" for="fieldset-alias">Super Power Alias</label>
<input class="input" type="text" id="fieldset-alias" />
</fieldset>
Source:
forms/_forms.scss, line 156
Simple
Forms depend on the Grid. See the markup for details.
Example
Markup: forms/forms-simple.html
<form class="form grid">
<div class="grid__row grid__row--padded">
<div class="grid__col grid__col--xs-12 grid__col--sm-6">
<label class="label" for="superhero-fav">
Who's your favorite superhero?
</label>
<input class="input" type="text" id="superhero-fav" />
</div>
</div>
<div class="grid__row grid__row--padded">
<div class="grid__col grid__col--xs-12 grid__col--sm-6">
<input type="submit" class="button button--primary" />
</div>
</div>
</form>
Source:
forms/_forms.scss, line 162
Verbose
Use fieldset and legend tags to wrap inputs with verbose forms; forms with multiple inputs.
Example
Super Power Interviewee Form
Markup: forms/forms-verbose.html
<h2>Super Power Interviewee Form</h2>
<form class="form">
<fieldset class="fieldset">
<legend class="fieldset__legend">What is your name?</legend>
<div class="grid">
<div class="grid__row grid__row--padded">
<div class="grid__col--sm-6 grid__col--xs-12">
<label class="label" for="verbose-alias">Super Power Alias</label>
<input class="input" type="text" id="verbose-alias" />
</div>
<div class="grid__col--sm-6 grid__col--xs-12">
<label class="label" for="verbose-name">Real Name</label>
<input
class="input"
placeholder="We promise not to tell"
type="text"
id="verbose-name"
/>
</div>
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset__legend">Good, Bad Or Somewhere In Between?</legend>
<div class="grid">
<div class="grid__row grid__row--padded">
<div class="grid__col--md-6 grid__col--xs-12">
<p>Do You Use Your Powers For Good?</p>
<div role="radiogroup">
<label class="label label--inline label--light" for="powers-good">
<input class="radio" type="radio" name="good-powers" id="powers-good" />
Always!
</label>
<label class="label label--inline label--light" for="powers-never">
<input class="radio" type="radio" name="good-powers" id="powers-never" />
Never!
</label>
</label>
<label class="label label--inline label--light" for="powers-sometimes">
<input class="radio" type="radio" name="good-powers" id="powers-sometimes"/>
Sometimes...
</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset__legend">Please turn on your super powers.</legend>
<div class="toggle toggle--lg" id="toggle-verbose-switch">
<input type="checkbox" id="toggle-verbose" class="toggle__input">
<label class="toggle__label" for="toggle-verbose">
<span class="toggle__screenreader-message">Toggle this option</span>
<span class="toggle__switch" aria-hidden="true">
<span class="toggle__switch-option toggle__switch-option--on" aria-hidden="true">
<svg class="icon icon--lg"><use xlink:href="#ei-check"></use></svg>
</span>
<span class="toggle__switch-option toggle__switch-option--off" aria-hidden="true">
<svg class="icon icon--lg"><use xlink:href="#ei-close-o"></use></svg>
</span>
</span>
</label>
</div>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset__legend">What Compensation Do You Expect for Using Your Powers?</legend>
<div class="grid">
<div class="grid__row grid__row--padded">
<div class="grid__col--md-6 grid__col--xs-12">
<div class="grid__row grid__row--padded">
<div class="grid__col grid__col--xs-12">
<label class="label label--inline label--light" for="verbose-money">
<input class="checkbox" type="checkbox" id="verbose-money" />
Money Money... MONEY!
</label>
</div>
</div>
<div class="grid__row grid__row--padded">
<div class="grid__col grid__col--xs-12">
<label class="label label--inline label--light" for="verbose-compensation">
<input class="checkbox" type="checkbox" id="verbose-compensation" />
My contribution to society is enough compensation.
</label>
</div>
</div>
<div class="grid__row grid__row--padded">
<div class="grid__col grid__col--xs-12">
<label class="label label--inline label--light" for="verbose-access">
<input class="checkbox" type="checkbox" id="verbose-access" />
Access to secrets and elite members of society wouldn't hurt.
</label>
</div>
</div>
<div class="grid__row grid__row--padded">
<div class="grid__col grid__col--xs-12">
<label class="label label--inline label--light" for="famous">
<input class="checkbox" type="checkbox" id="famous" />
I WANA BE FAMOUS!
</label>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset__legend">What is your preffered costume colors?</legend>
<div class="grid">
<div class="grid__row grid__row--padded">
<div class="grid__col--xs-12">
<label class="label" for="verbose-select">Select Costume Color Scheme</label>
<select class="select select--full-width" id="verbose-select">
<optgroup label="Standard">
<option value="rnb">Red and Blue</option>
<option value="bng">Black and Grey</option>
</optgroup>
<optgroup label="Screaming For Attention">
<option value="hp">Hot Pink</option>
<option value="ny">Neon Yellow</option>
</optgroup>
</select>
</div>
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset__legend">How Did You Get Your Super Powers</legend>
<label for="verbose-textarea" class="label">Please be honest</label>
<textarea class="textarea textarea--full-width" rows="4" id="verbose-textarea">A hero can be anyone. Someone like you. Someone who'll rattle the cages. I seek the means to fight injustice. To turn fear against those who prey on the fearful. My anger outweights my guilt. I will go back to Gotham and I will fight people Iike this but I will not become an executioner.</textarea>
</fieldset>
<button class="button button--primary">Submit</button>
</form>
Source:
forms/_forms.scss, line 170