Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Form Radiobutton

Hoe komt u op het station?
(optioneel)
Vertrekdatum is een verplicht veld
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
.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>