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--radio field--multiplechoice">
<fieldset>
<legend class="field__legend mars ">Select your favourite topping</legend>
<div class="field__item js-focusable-box">
<input class="input input--radio js-focusable" name="radio-answer" value="bacon" id="bacon" type="radio">
<label class="label label--inline venus " for="bacon">
Bacon
</label>
</div>
<div class="field__item js-focusable-box">
<input class="input input--radio js-focusable" name="radio-answer" value="olives" id="olives" type="radio">
<label class="label label--inline venus " for="olives">
Olives
</label>
</div>
</fieldset>
</div>
{
"label_text": "Bacon",
"label_for": "radio",
"label_inline": true,
"legend": "Select your favourite topping",
"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
}
]
}