Group Radios
Een radio group heeft een root element fieldset.form-group, en geen div.form-group.
<!-- 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" checked>
<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" checked>
<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-invalid 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>
<p class="dso-message">Foutieve keuze</p>
</div>
</fieldset>
<!-- Input Radio Inline Info -->
<fieldset class="form-group dso-radios dso-required">
<legend class="dso-label-container">
<label class="control-label">
Gaat het om de bouw van één of meer woningen?
</label>
<button type="button" class="btn dso-info-button dso-open">
<span class="sr-only">
Toelichting
</span>
</button>
</legend>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="radio" id="input-radio-inline-info-0" name="input-radio-inline-info" value="1" checked>
<label for="input-radio-inline-info-0">
ja
</label>
<button type="button" class="btn dso-info-button dso-open">
<span class="sr-only">
Toelichting
</span>
</button>
<div class="dso-info">
<button type="button">
<span class="sr-only">Sluiten</span>
</button>
<div class="dso-rich-content">
<h4>Heading 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
</p>
</div>
</div>
</div>
<div class="dso-selectable">
<input type="radio" id="input-radio-inline-info-1" name="input-radio-inline-info" value="2">
<label for="input-radio-inline-info-1">
nee
</label>
<button type="button" class="btn dso-info-button">
<span class="sr-only">
Toelichting
</span>
</button>
</div>
<p class="dso-help-block" id="helpTextId_input-radio-inline-info">Antwoord hier met "Ja" of "Nee"</p>
</div>
<div class="dso-info">
<button type="button">
<span class="sr-only">Sluiten</span>
</button>
<div class="dso-rich-content">
<h4>Heading 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
</p>
</div>
</div>
</fieldset>
<fieldset {{ className('form-group', 'dso-radios', [state, 'dso-' + state], [inline, 'dso-inline'], [required, 'dso-required']) }}>
<legend class="dso-label-container">
<label class="control-label">
{{ label }}
</label>
{% if infoText %}
{% render '@info-button', {infoOpen: infoOpen} %}
{% endif %}
</legend>
<div class="dso-field-container">
{% for option in options %}
<div class="dso-selectable">
<input type="radio" id="{{ id }}-{{ loop.index0 }}" name="{{ id }}" value="{{ option.value }}"
{% if option.disabled %} disabled{% endif %}
{% if option.checked %} checked{% endif %}
{% if option.required %} required{% endif %}>
<label for="{{ id }}-{{ loop.index0 }}">
{{ option.label }}
</label>
{% if option.infoText %}
{% render '@info-button', {infoOpen: option.infoOpen} %}
{% endif %}
{% if option.infoOpen %}
{% render '@info', {infoText: option.infoText} %}
{% endif %}
</div>
{% endfor %}
{% if errorText %}
{% render '@error-block', {errorText: errorText} %}
{% endif %}
{% if helpText %}
{% render '@help-block', {helpText: helpText, id: id} %}
{% endif %}
</div>
{% if infoOpen %}
{% render '@info', {infoText: infoText} %}
{% endif %}
</fieldset>
/* Default */
__title: default
id: input-radio
label: Maak een keuze
helpText: Kies een oneven getal
options:
- value: 1
label: een
checked: true
- value: 2
label: twee
- value: 3
label: drie
/* Input Radio Required */
__title: Verplicht
id: input-radio-required
label: Maak een keuze
helpText: Kies een oneven getal
options:
- value: 1
label: een
checked: true
- value: 2
label: twee
- value: 3
label: drie
__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 */
__title: Ongeldig
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
__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 */
__title: Geldig
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
__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 */
__title: 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
required: true
state: valid
/* Input Radio Inline */
__title: Inline
id: input-radio-inline
label: Gaat het om de bouw van één of meer woningen?
helpText: ''
options:
- value: 1
label: ja
checked: true
- value: 2
label: nee
__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
state: invalid
errorText: Foutieve keuze
/* Input Radio Inline Info */
__title: Infobutton
id: input-radio-inline-info
label: Gaat het om de bouw van één of meer woningen?
helpText: Antwoord hier met "Ja" of "Nee"
options:
- value: 1
label: ja
checked: true
infoOpen: true
infoText: |
<h4>Heading 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
</p>
- value: 2
label: nee
infoText: |
Closed
__explanation:
- >-
Een radio fieldset kan op twee plekken een info button krijgen. Naast de de
vraag en per optie. Als een toelichting is opengeklapt moet er
<code>.dso-open</code> op de toelichting button geplaatst worden.
required: true
infoOpen: true
infoText: |
<h4>Heading 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
</p>