<!-- Default -->
<fieldset class="form-group dso-radios">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-0" name="input-radio" value="1" />
<label for="input-radio-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-1" name="input-radio" value="2" />
<label for="input-radio-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-2" name="input-radio" value="3" />
<label for="input-radio-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio">Kies een oneven getal</p>
</div>
</fieldset>
<!-- Input Radio Required -->
<fieldset class="form-group dso-radios dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-required-0" name="input-radio-required" value="1" />
<label for="input-radio-required-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-required-1" name="input-radio-required" value="2" />
<label for="input-radio-required-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-required-2" name="input-radio-required" value="3" />
<label for="input-radio-required-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio-required">Kies een oneven getal</p>
</div>
</fieldset>
<!-- Input Radio Invalid -->
<fieldset class="form-group dso-radios dso-invalid dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-invalid-0" name="input-radio-invalid" value="1" />
<label for="input-radio-invalid-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-invalid-1" name="input-radio-invalid" value="2" checked />
<label for="input-radio-invalid-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-invalid-2" name="input-radio-invalid" value="3" />
<label for="input-radio-invalid-2">
drie
</label>
</div>
<p class="dso-message">Foutieve keuze</p>
<p class="dso-help-block" id="helpTextId_input-radio-invalid">Kies een oneven getal</p>
</div>
</fieldset>
<!-- Input Radio Valid -->
<fieldset class="form-group dso-radios dso-valid dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-valid-0" name="input-radio-valid" value="1" checked />
<label for="input-radio-valid-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-valid-1" name="input-radio-valid" value="2" />
<label for="input-radio-valid-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-valid-2" name="input-radio-valid" value="3" />
<label for="input-radio-valid-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio-valid">Kies een oneven getal</p>
</div>
</fieldset>
<!-- Input Radio Disabled -->
<fieldset class="form-group dso-radios dso-valid dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-disabled-0" name="input-radio-disabled" value="1" disabled />
<label for="input-radio-disabled-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-disabled-1" name="input-radio-disabled" value="2" disabled />
<label for="input-radio-disabled-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-disabled-2" name="input-radio-disabled" value="3" disabled checked />
<label for="input-radio-disabled-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio-disabled">Kies een oneven getal</p>
</div>
</fieldset>
<!-- Input Radio Inline -->
<fieldset class="form-group dso-radios dso-inline dso-required">
<legend class="dso-label-container">
<label class="control-label">
Gaat het om de bouw van één of meer woningen?
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-inline-0" name="input-radio-inline" value="1" checked />
<label for="input-radio-inline-0">
ja
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-inline-1" name="input-radio-inline" value="2" />
<label for="input-radio-inline-1">
nee
</label>
</div>
</div>
</fieldset>
<fieldset class="form-group dso-radios{{#if state}} dso-{{ state }}{{/if}}{{#if inline}} dso-inline{{/if}}{{#if required }} dso-required{{/if}}">
<legend class="dso-label-container">
<label class="control-label">
{{ label }}
</label>
</legend>
<div class="dso-field-container">
{{#each options }}
<div class="dso-selectable">
<input type="radio" id="{{ ../id }}-{{ @index }}" name="{{ ../id }}" value="{{ value }}"
{{{ifattr 'disabled' disabled }}}
{{{ifattr 'checked' checked }}}
{{{ifattr 'required' required }}} />
<label for="{{ ../id }}-{{ @index }}">
{{ label }}
</label>
</div>
{{/each}}
{{#if errorText }}
{{> '@error-block' }}
{{/if}}
{{#if helpText }}
{{> '@help-block' }}
{{/if}}
</div>
</fieldset>
/* Default */
id: input-radio
label: Maak een keuze
helpText: Kies een oneven getal
options:
- value: 1
label: een
- value: 2
label: twee
- value: 3
label: drie
/* Input Radio Required */
id: input-radio-required
label: Maak een keuze
helpText: Kies een oneven getal
options:
- value: 1
label: een
- value: 2
label: twee
- value: 3
label: drie
__title: Verplicht
__explanation:
- >-
Een verplichte keuze wordt in de markup aangegeven met
<code>.dso-required</code> op de <code>.form-group.dso-radios</code>
- >-
Radiobuttons hebben (net zoals checkboxen) een
<code>fieldset.form-group</code> als root element, geen
<code>div.form-group</code>
required: true
/* Input Radio Invalid */
id: input-radio-invalid
label: Maak een keuze
helpText: Kies een oneven getal
options:
- value: 1
label: een
- value: 2
label: twee
checked: true
- value: 3
label: drie
__title: Ongeldig
__explanation:
- >-
Indien een radio groep ongeldig is, dient er een <code>.dso-invalid</code>
class gezet te worden op de div met de class <code>.dso-radios</code>.
required: true
state: invalid
errorText: Foutieve keuze
/* Input Radio Valid */
id: input-radio-valid
label: Maak een keuze
helpText: Kies een oneven getal
options:
- value: 1
label: een
checked: true
- value: 2
label: twee
- value: 3
label: drie
__title: Geldig
__explanation:
- >-
Indien een radio groep ongeldig was en valide wordt gemaakt, dient de
<code>.dso-invalid</code> class vervangen te worden door de class
<code>.dso-valid</code>.
required: true
state: valid
/* Input Radio Disabled */
id: input-radio-disabled
label: Maak een keuze
helpText: Kies een oneven getal
options:
- value: 1
label: een
disabled: true
- value: 2
label: twee
disabled: true
- value: 3
label: drie
checked: true
disabled: true
__title: Disabled
required: true
state: valid
/* Input Radio Inline */
id: input-radio-inline
label: Gaat het om de bouw van één of meer woningen?
helpText: null
options:
- value: 1
label: ja
checked: true
- value: 2
label: nee
__title: Inline
__explanation:
- >-
Een keuze selectie tussen <code>ja</code> en <code>nee</code> vraagt om een
inline variant. Dit is te bereiken door <code>.dso-inline</code> op
<code>.dso-radios</code> te zetten.
required: true
inline: true
- Handle: @group-radios
- Variants (6): Default , Input Radio Required , Input Radio Invalid , Input Radio Valid , Input Radio Disabled , Input Radio Inline
- Preview:
- Filesystem Path: components\03-forms\01-groups\group-radios.hbs
- References (2): @error-block, @help-block
Een radio group heeft een root element fieldset.form-group, en geen div.form-group.
WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage
This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.
<label class="control-label">
Maak een keuze
</label>
NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2
Check that the title element describes the document.
<title>Group Radios
NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107
Check that a change of context does not occur when this input field receives focus.
<input type="radio" id="input-radio-0" name="input-radio" value="1">
NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_1.G83,G84,G85
If an input error is automatically detected in this form, check that the item(s) in error are identified and the error(s) are described to the user in text.
<form class="form-horizontal">
<!-- Start: @group-radios--default -->
<fieldset class="form-group dso-radios">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-0" name="input-radio" value="1">
<label for="input-radio-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-1" name="input-radio" value="2">
<label for="input-radio-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-2" name="input-radio" value="3">
<label for="input-radio-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio">Kies een oneven getal</p>
</div>
</fieldset>
<!-- End: @group-radios--default --><hr>
<!-- Start: @group-radios--input-radio-required -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Verplicht</h2>
<p>Een verplichte keuze wordt in de markup aangegeven met <code>.dso-required</code> op de <code>.form-group.dso-radios</code></p>
<p>Radiobuttons hebben (net zoals checkboxen) een <code>fieldset.form-group</code> als root element, geen <code>div.form-group</code></p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-required-0" name="input-radio-required" value="1">
<label for="input-radio-required-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-required-1" name="input-radio-required" value="2">
<label for="input-radio-required-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-required-2" name="input-radio-required" value="3">
<label for="input-radio-required-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio-required">Kies een oneven getal</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-required --><hr>
<!-- Start: @group-radios--input-radio-invalid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Ongeldig</h2>
<p>Indien een radio groep ongeldig is, dient er een <code>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-radios</code>.</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-invalid dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-invalid-0" name="input-radio-invalid" value="1">
<label for="input-radio-invalid-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-invalid-1" name="input-radio-invalid" value="2" checked="">
<label for="input-radio-invalid-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-invalid-2" name="input-radio-invalid" value="3">
<label for="input-radio-invalid-2">
drie
</label>
</div>
<p class="dso-message">Foutieve keuze</p>
<p class="dso-help-block" id="helpTextId_input-radio-invalid">Kies een oneven getal</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-invalid --><hr>
<!-- Start: @group-radios--input-radio-valid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Geldig</h2>
<p>Indien een radio groep ongeldig was en valide wordt gemaakt, dient de <code>.dso-invalid</code> class vervangen te worden door de class <code>.dso-valid</code>.</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-valid dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-valid-0" name="input-radio-valid" value="1" checked="">
<label for="input-radio-valid-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-valid-1" name="input-radio-valid" value="2">
<label for="input-radio-valid-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-valid-2" name="input-radio-valid" value="3">
<label for="input-radio-valid-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio-valid">Kies een oneven getal</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-valid --><hr>
<!-- Start: @group-radios--input-radio-disabled -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Disabled</h2>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-valid dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-disabled-0" name="input-radio-disabled" value="1" disabled="">
<label for="input-radio-disabled-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-disabled-1" name="input-radio-disabled" value="2" disabled="">
<label for="input-radio-disabled-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-disabled-2" name="input-radio-disabled" value="3" disabled="" checked="">
<label for="input-radio-disabled-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio-disabled">Kies een oneven getal</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-disabled --><hr>
<!-- Start: @group-radios--input-radio-inline -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Inline</h2>
<p>Een keuze selectie tussen <code>ja</code> en <code>nee</code> vraagt om een inline variant. Dit is te bereiken door <code>.dso-inline</code> op <code>.dso-radios</code> te zetten.</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-inline dso-required">
<legend class="dso-label-container">
<label class="control-label">
Gaat het om de bouw van één of meer woningen?
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-inline-0" name="input-radio-inline" value="1" checked="">
<label for="input-radio-inline-0">
ja
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-inline-1" name="input-radio-inline" value="2">
<label for="input-radio-inline-1">
nee
</label>
</div>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-inline --><hr>
<button type="submit" class="hidden">VALIDATOR_ONLY</button>
</form>
NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_2.G131,G89,G184,H90
Check that descriptive labels or instructions (including for required fields) are provided for user input in this form.
<form class="form-horizontal">
<!-- Start: @group-radios--default -->
<fieldset class="form-group dso-radios">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-0" name="input-radio" value="1">
<label for="input-radio-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-1" name="input-radio" value="2">
<label for="input-radio-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-2" name="input-radio" value="3">
<label for="input-radio-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio">Kies een oneven getal</p>
</div>
</fieldset>
<!-- End: @group-radios--default --><hr>
<!-- Start: @group-radios--input-radio-required -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Verplicht</h2>
<p>Een verplichte keuze wordt in de markup aangegeven met <code>.dso-required</code> op de <code>.form-group.dso-radios</code></p>
<p>Radiobuttons hebben (net zoals checkboxen) een <code>fieldset.form-group</code> als root element, geen <code>div.form-group</code></p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-required-0" name="input-radio-required" value="1">
<label for="input-radio-required-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-required-1" name="input-radio-required" value="2">
<label for="input-radio-required-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-required-2" name="input-radio-required" value="3">
<label for="input-radio-required-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio-required">Kies een oneven getal</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-required --><hr>
<!-- Start: @group-radios--input-radio-invalid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Ongeldig</h2>
<p>Indien een radio groep ongeldig is, dient er een <code>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-radios</code>.</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-invalid dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-invalid-0" name="input-radio-invalid" value="1">
<label for="input-radio-invalid-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-invalid-1" name="input-radio-invalid" value="2" checked="">
<label for="input-radio-invalid-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-invalid-2" name="input-radio-invalid" value="3">
<label for="input-radio-invalid-2">
drie
</label>
</div>
<p class="dso-message">Foutieve keuze</p>
<p class="dso-help-block" id="helpTextId_input-radio-invalid">Kies een oneven getal</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-invalid --><hr>
<!-- Start: @group-radios--input-radio-valid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Geldig</h2>
<p>Indien een radio groep ongeldig was en valide wordt gemaakt, dient de <code>.dso-invalid</code> class vervangen te worden door de class <code>.dso-valid</code>.</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-valid dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-valid-0" name="input-radio-valid" value="1" checked="">
<label for="input-radio-valid-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-valid-1" name="input-radio-valid" value="2">
<label for="input-radio-valid-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-valid-2" name="input-radio-valid" value="3">
<label for="input-radio-valid-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio-valid">Kies een oneven getal</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-valid --><hr>
<!-- Start: @group-radios--input-radio-disabled -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Disabled</h2>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-valid dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-disabled-0" name="input-radio-disabled" value="1" disabled="">
<label for="input-radio-disabled-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-disabled-1" name="input-radio-disabled" value="2" disabled="">
<label for="input-radio-disabled-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-disabled-2" name="input-radio-disabled" value="3" disabled="" checked="">
<label for="input-radio-disabled-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio-disabled">Kies een oneven getal</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-disabled --><hr>
<!-- Start: @group-radios--input-radio-inline -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Inline</h2>
<p>Een keuze selectie tussen <code>ja</code> en <code>nee</code> vraagt om een inline variant. Dit is te bereiken door <code>.dso-inline</code> op <code>.dso-radios</code> te zetten.</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-inline dso-required">
<legend class="dso-label-container">
<label class="control-label">
Gaat het om de bouw van één of meer woningen?
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-inline-0" name="input-radio-inline" value="1" checked="">
<label for="input-radio-inline-0">
ja
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-inline-1" name="input-radio-inline" value="2">
<label for="input-radio-inline-1">
nee
</label>
</div>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-inline --><hr>
<button type="submit" class="hidden">VALIDATOR_ONLY</button>
</form>
NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_3.G177
Check that this form provides suggested corrections to errors in user input, unless it would jeopardize the security or purpose of the content.
<form class="form-horizontal">
<!-- Start: @group-radios--default -->
<fieldset class="form-group dso-radios">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-0" name="input-radio" value="1">
<label for="input-radio-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-1" name="input-radio" value="2">
<label for="input-radio-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-2" name="input-radio" value="3">
<label for="input-radio-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio">Kies een oneven getal</p>
</div>
</fieldset>
<!-- End: @group-radios--default --><hr>
<!-- Start: @group-radios--input-radio-required -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Verplicht</h2>
<p>Een verplichte keuze wordt in de markup aangegeven met <code>.dso-required</code> op de <code>.form-group.dso-radios</code></p>
<p>Radiobuttons hebben (net zoals checkboxen) een <code>fieldset.form-group</code> als root element, geen <code>div.form-group</code></p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-required-0" name="input-radio-required" value="1">
<label for="input-radio-required-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-required-1" name="input-radio-required" value="2">
<label for="input-radio-required-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-required-2" name="input-radio-required" value="3">
<label for="input-radio-required-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio-required">Kies een oneven getal</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-required --><hr>
<!-- Start: @group-radios--input-radio-invalid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Ongeldig</h2>
<p>Indien een radio groep ongeldig is, dient er een <code>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-radios</code>.</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-invalid dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-invalid-0" name="input-radio-invalid" value="1">
<label for="input-radio-invalid-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-invalid-1" name="input-radio-invalid" value="2" checked="">
<label for="input-radio-invalid-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-invalid-2" name="input-radio-invalid" value="3">
<label for="input-radio-invalid-2">
drie
</label>
</div>
<p class="dso-message">Foutieve keuze</p>
<p class="dso-help-block" id="helpTextId_input-radio-invalid">Kies een oneven getal</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-invalid --><hr>
<!-- Start: @group-radios--input-radio-valid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Geldig</h2>
<p>Indien een radio groep ongeldig was en valide wordt gemaakt, dient de <code>.dso-invalid</code> class vervangen te worden door de class <code>.dso-valid</code>.</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-valid dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-valid-0" name="input-radio-valid" value="1" checked="">
<label for="input-radio-valid-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-valid-1" name="input-radio-valid" value="2">
<label for="input-radio-valid-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-valid-2" name="input-radio-valid" value="3">
<label for="input-radio-valid-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio-valid">Kies een oneven getal</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-valid --><hr>
<!-- Start: @group-radios--input-radio-disabled -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Disabled</h2>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-valid dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-disabled-0" name="input-radio-disabled" value="1" disabled="">
<label for="input-radio-disabled-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-disabled-1" name="input-radio-disabled" value="2" disabled="">
<label for="input-radio-disabled-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-disabled-2" name="input-radio-disabled" value="3" disabled="" checked="">
<label for="input-radio-disabled-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio-disabled">Kies een oneven getal</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-disabled --><hr>
<!-- Start: @group-radios--input-radio-inline -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Inline</h2>
<p>Een keuze selectie tussen <code>ja</code> en <code>nee</code> vraagt om een inline variant. Dit is te bereiken door <code>.dso-inline</code> op <code>.dso-radios</code> te zetten.</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-inline dso-required">
<legend class="dso-label-container">
<label class="control-label">
Gaat het om de bouw van één of meer woningen?
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-inline-0" name="input-radio-inline" value="1" checked="">
<label for="input-radio-inline-0">
ja
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-inline-1" name="input-radio-inline" value="2">
<label for="input-radio-inline-1">
nee
</label>
</div>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-inline --><hr>
<button type="submit" class="hidden">VALIDATOR_ONLY</button>
</form>
NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_4.G98,G99,G155,G164,G168.LegalForms
If this form would bind a user to a financial or legal commitment, modify/delete user-controllable data, or submit test responses, ensure that submissions are either reversible, checked for input errors, and/or confirmed by the user.
<form class="form-horizontal">
<!-- Start: @group-radios--default -->
<fieldset class="form-group dso-radios">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-0" name="input-radio" value="1">
<label for="input-radio-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-1" name="input-radio" value="2">
<label for="input-radio-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-2" name="input-radio" value="3">
<label for="input-radio-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio">Kies een oneven getal</p>
</div>
</fieldset>
<!-- End: @group-radios--default --><hr>
<!-- Start: @group-radios--input-radio-required -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Verplicht</h2>
<p>Een verplichte keuze wordt in de markup aangegeven met <code>.dso-required</code> op de <code>.form-group.dso-radios</code></p>
<p>Radiobuttons hebben (net zoals checkboxen) een <code>fieldset.form-group</code> als root element, geen <code>div.form-group</code></p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-required-0" name="input-radio-required" value="1">
<label for="input-radio-required-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-required-1" name="input-radio-required" value="2">
<label for="input-radio-required-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-required-2" name="input-radio-required" value="3">
<label for="input-radio-required-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio-required">Kies een oneven getal</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-required --><hr>
<!-- Start: @group-radios--input-radio-invalid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Ongeldig</h2>
<p>Indien een radio groep ongeldig is, dient er een <code>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-radios</code>.</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-invalid dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-invalid-0" name="input-radio-invalid" value="1">
<label for="input-radio-invalid-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-invalid-1" name="input-radio-invalid" value="2" checked="">
<label for="input-radio-invalid-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-invalid-2" name="input-radio-invalid" value="3">
<label for="input-radio-invalid-2">
drie
</label>
</div>
<p class="dso-message">Foutieve keuze</p>
<p class="dso-help-block" id="helpTextId_input-radio-invalid">Kies een oneven getal</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-invalid --><hr>
<!-- Start: @group-radios--input-radio-valid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Geldig</h2>
<p>Indien een radio groep ongeldig was en valide wordt gemaakt, dient de <code>.dso-invalid</code> class vervangen te worden door de class <code>.dso-valid</code>.</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-valid dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-valid-0" name="input-radio-valid" value="1" checked="">
<label for="input-radio-valid-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-valid-1" name="input-radio-valid" value="2">
<label for="input-radio-valid-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-valid-2" name="input-radio-valid" value="3">
<label for="input-radio-valid-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio-valid">Kies een oneven getal</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-valid --><hr>
<!-- Start: @group-radios--input-radio-disabled -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Disabled</h2>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-valid dso-required">
<legend class="dso-label-container">
<label class="control-label">
Maak een keuze
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-disabled-0" name="input-radio-disabled" value="1" disabled="">
<label for="input-radio-disabled-0">
een
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-disabled-1" name="input-radio-disabled" value="2" disabled="">
<label for="input-radio-disabled-1">
twee
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-disabled-2" name="input-radio-disabled" value="3" disabled="" checked="">
<label for="input-radio-disabled-2">
drie
</label>
</div>
<p class="dso-help-block" id="helpTextId_input-radio-disabled">Kies een oneven getal</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-disabled --><hr>
<!-- Start: @group-radios--input-radio-inline -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Inline</h2>
<p>Een keuze selectie tussen <code>ja</code> en <code>nee</code> vraagt om een inline variant. Dit is te bereiken door <code>.dso-inline</code> op <code>.dso-radios</code> te zetten.</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-radios dso-inline dso-required">
<legend class="dso-label-container">
<label class="control-label">
Gaat het om de bouw van één of meer woningen?
</label>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-inline-0" name="input-radio-inline" value="1" checked="">
<label for="input-radio-inline-0">
ja
</label>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-inline-1" name="input-radio-inline" value="2">
<label for="input-radio-inline-1">
nee
</label>
</div>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-radios--input-radio-inline --><hr>
<button type="submit" class="hidden">VALIDATOR_ONLY</button>
</form>