Inputs

Requirements

  • Labels or instructions must be provided when content requires user input.
  • Groups of related inputs must be semantically grouped together.
  • Interactive elements such as input elements should provide an area large enough that it is easy to activate them
  • The placeholder attribute should never be required to understand an input element

Input Elements That Require An Associated Label Element

  • <input type="text">
  • <input type="checkbox">
  • <input type="radio">
  • <input type="file">
  • <input type="password">
  • <textarea>
  • <select>

Input Elements That Do Not Use An Associated Label Element

  • Submit and Reset buttons (<input type="submit"> or <input type="reset">)
  • Image buttons (<input type="image">)
  • Hidden input fields (<input type="hidden">)
  • Script buttons (<button> elements or <input type="button">)

Implicit labels

Use this component to implicitly give an input an label. Inputs and implicitly associated labels do not need to make use of the for and id attributes to be accessible.

_cmp.input-label.scss 
<label class="cmp-input-label">
  Input with an implicit label
  <input type="checkbox">
</label>

Explicit Labels

Use this component to explicitly give an input an label. Inputs and with an explicitly associated label must use the for and id attributes to be accessible.

_cmp.input-label.scss 
<label class="cmp-input-label" for="explicit">Input with an explicit label</label>
<input type="checkbox" id="explicit">

input type checkbox

Use this component for single values to be selected/deselected. Groups of related instances of this component must be semantically linked together

_cmp.input-checkbox.scss
Select One, None, Or Many 
<!-- single input type checkbox -->
<label class="cmp-input-checkbox">
  <input type="checkbox" name="single optional" value="selected/deselected">
  Single Option
</label>

<!-- group of input type checkbox -->
<fieldset>
  <legend>Select One, None, Or Many</legend>
  <label class="cmp-input-checkbox">
    <input type="checkbox" name="group of options" value="option 1">
    Option 1
  </label>
  <label class="cmp-input-checkbox">
    <input type="checkbox" name="group of options" value="option 2">
    Option 2
  </label>
  <label class="cmp-input-checkbox">
    <input type="checkbox" name="group of options" value="option 3">
    Option 3
  </label>
</fieldset>

Input type radio

Use this component for a group of related inputs where only one input can be selected at the same time. Do not use this component for a single input that exists without any related inputs.

_cmp.input-radio.scss
Select One 
<fieldset class="cmp-input-radio">
  <legend>Select One</legend>
  <label>
    <input type="radio" name="option" value="option 1">
    Option 1
  </label>
  <label>
    <input type="radio" name="option" value="option 2">
    Option 2
  </label>
  <label>
    <input type="radio" name="option" value="option 3">
    Option 3
  </label>
</fieldset>

Input type text

Use this component for a single line text input. Do not use this component for longer of multiline text input

_cmp.input-text.scss 
<label>
  Text Input
  <input type="text" name="input name" class="cmp-input-text"></input>
</label>

Text area

Use this component for multi-line plain-text input. This component is useful when you want to allow users to enter a sizeable amount of free-form text.

_cmp.text-area.scss 
<label>
  Text Area
  <textarea class="cmp-text-area">Don't use me for single line text input. &#10;Use me for multi-line text input.</textarea>
</label>