Inputs are used wherever users enter answers to surveys.
Additional specialist variants of the standard text input are the unit, currency and percentage
Context vary for each input but label is used for human readable aspect and ‘label_text’ is input content.
Global
/components/02-form-elements/input/_input.scss/components/02-form-elements/input-type/_input-type.scss
<div class="field field--checkbox field--multiplechoice">
<fieldset>
<legend class="field__legend mars">Select all that apply</legend>
<div class="field__item js-focusable-box">
<input class="input input--checkbox js-focusable" name="checkbox-answer" value="bacon" id="bacon" type="checkbox">
<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">
<label class="label label--inline venus " for="olives">
Olives
</label>
</div>
</fieldset>
</div>
{
"label_text": "Bacon",
"label_for": "checkbox",
"label_inline": true,
"options": [
{
"option_text": "Bacon",
"option_value": "bacon",
"label_for": "bacon",
"label_text": "Bacon",
"label_inline": true
},
{
"option_text": "Olives",
"option_value": "olives",
"label_for": "olives",
"label_text": "Olives",
"label_inline": true
}
]
}