DSO Toolkit | Component Library

Group Radios: 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>
 
<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>
    {{#if infoText }}
      {{> '@info-button' }}
    {{/if}}
  </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>
        {{#if infoText }}
          {{> '@info-button' }}
        {{/if}}
        {{#if infoOpen }}
          {{> '@info' }}
        {{/if}}
      </div>
    {{/each}}
    {{#if errorText }}
      {{> '@error-block' }}
    {{/if}}
    {{#if helpText }}
      {{> '@help-block' }}
    {{/if}}
  </div>
  {{#if infoOpen }}
    {{> '@info' }}
  {{/if}}
</fieldset>
 
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

Een radio group heeft een root element fieldset.form-group, en geen div.form-group.