A ‘field’ wraps the various form inputs and provides context for layout—it has no visible styling.
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.
Automatially includes “Select all that apply” to discourage authors using the legend for this.
Optional legend to describe a group of inputs.
<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>
{
"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
}
]
}