SDC Pattern Library

Field

Basic Field

A ‘field’ wraps the various form inputs and provides context for layout—it has no visible styling.

Variants

Toggle

A smaller field designed as a UI element, rather than a question, eg. toggle for passwords. This field does not use the enhanced focus styling of regular fields.

Field with checkbox

Automatially includes “Select all that apply” to discourage authors using the legend for this.

Legend

Optional legend to describe a group of inputs.

<!-- Basic Field -->
<div class="field">
    <label class="label venus " for="text-input">
        Your name
    </label>
    <input class="input input--text" type="text" id="text-input" />
</div>


<!-- Checkboxes -->
<div class="field field--checkbox field--multiplechoice">
    <fieldset>
        <div class="field__label mars" id="select-all">Select all that apply</div>
        <div class="field__item js-focusable-box">
            <input class="input input--checkbox js-focusable" name="checkbox-answer" value="bacon" id="bacon" type="checkbox" aria-describedby="select-all">
            <label class="label label--inline venus " for="bacon">
              Bacon
          </label>
        </div>
        <div class="field__item js-focusable-box">
            <input class="input input--checkbox js-focusable" name="checkbox-answer" value="olives" id="olives" type="checkbox" aria-describedby="select-all">
            <label class="label label--inline venus " for="olives">
              Olives
          </label>
        </div>
    </fieldset>
</div>


<!-- Legend -->
<div class="field field--checkbox field--multiplechoice">
    <fieldset>
        <legend class="field__legend mars">Select your favourite pizza topping</legend>
        <div class="field__item js-focusable-box">
            <input class="input input--radio js-focusable" name="checkbox-answer" value="Cheese" id="Cheese" type="radio" aria-describedby="select-all">
            <label class="label label--inline venus " for="Cheese">
              Cheese
          </label>
        </div>
        <div class="field__item js-focusable-box">
            <input class="input input--radio js-focusable" name="checkbox-answer" value="Tomato" id="Tomato" type="radio" aria-describedby="select-all">
            <label class="label label--inline venus " for="Tomato">
              Tomato
          </label>
        </div>
        <div class="field__item js-focusable-box">
            <input class="input input--radio js-focusable" name="checkbox-answer" value="Pepperoni" id="Pepperoni" type="radio" aria-describedby="select-all">
            <label class="label label--inline venus " for="Pepperoni">
              Pepperoni
          </label>
        </div>
    </fieldset>
</div>


/* Basic Field: No context defined */


/* Checkboxes */
{
  "type": "Checkboxes",
  "select_all": true,
  "options": [
    {
      "type": "checkbox",
      "option_text": "Bacon",
      "option_value": "bacon",
      "label_for": "bacon",
      "label_text": "Bacon",
      "label_inline": true
    },
    {
      "type": "checkbox",
      "option_text": "Olives",
      "option_value": "olives",
      "label_for": "olives",
      "label_text": "Olives",
      "label_inline": true
    }
  ]
}


/* Legend */
{
  "legend": "Select your favourite pizza topping",
  "options": [
    {
      "type": "radio",
      "option_text": "Cheese",
      "option_value": "Cheese",
      "label_for": "Cheese",
      "label_text": "Cheese",
      "label_inline": true
    },
    {
      "type": "radio",
      "option_text": "Tomato",
      "option_value": "Tomato",
      "label_for": "Tomato",
      "label_text": "Tomato",
      "label_inline": true
    },
    {
      "type": "radio",
      "option_text": "Pepperoni",
      "option_value": "Pepperoni",
      "label_for": "Pepperoni",
      "label_text": "Pepperoni",
      "label_inline": true
    }
  ]
}