Form Radiobutton
.radioButton
Styling for composite form html
Markup
<fieldset class="formfield" data-label="Hoe komt u op het station?" >
<legend class="formfield__label">Hoe komt u op het station?<br><span class="formfield__required">(optioneel)</span></legend>
<div class="formfield__inputContainer">
<ul class="list formfield__inputGroup">
<li class="list__item formfield__inputGroupItem">
<div class="radioButton">
<input type="radio"
class="radioButton__input"
id="input3"
name="input3">
<label class="radioButton__label" for="input3" tabindex="-1">Met de auto</label>
</div>
</li>
<li class="list__item formfield__inputGroupItem">
<div class="radioButton">
<input type="radio" class="radioButton__input" id="input4" name="input3" >
<label class="radioButton__label" for="input4" tabindex="-1">Met de fiets</label>
</div>
</li>
<li class="list__item formfield__inputGroupItem">
<div class="radioButton">
<input type="radio" class="radioButton__input" id="input5" name="input3" >
<label class="radioButton__label" for="input5" tabindex="-1">Met het openbaar vervoer</label>
</div>
</li>
<li class="list__item formfield__inputGroupItem">
<div class="radioButton radioButton--otherValue" data-controller="generic/ui/OtherValueRadioButton">
<input type="radio" class="radioButton__input" id="input6" name="input3" value="-other" >
<label class="radioButton__label" for="input6" tabindex="-1">
<span class="alt">Anders, namelijk:</span>
</label>
<div class="radioButton__otherValue">
<input type="text"
class="textInput textInput--fullWidth"
name="input3_other"
aria-label="textveld voor Anders, namelijk:"
/>
</div>
</div>
</li>
</ul>
<div class="formfield__errorMessage">
Vertrekdatum is een verplicht veld
</div>
<a href="javascript:void(0)" class="toolTip formfield__toolTip" data-controller="generic/ui/ToolTip">
<span class="toolTip--hidden"> E illis, cum volemus. Ea possunt paria non esse.
At eum nihili facit; Nec tamen ullo modo summum pecudis bonum et hominis idem mihi videri pot
</span>
</a>
</div>
</fieldset>