DSO Component Library

DSO select: Radio 

<div class="dso-select single">
    <fieldset>
        <legend>Waar wordt de dakkapel gebouwd?</legend>
        <div class="option">
            <input type="radio" id="radio_dakkapel_positie_0" name="dakkapel_positie" value="1" />
            <label for="radio_dakkapel_positie_0">
            Zijkant
          </label>
        </div>
        <div class="option">
            <input type="radio" id="radio_dakkapel_positie_1" name="dakkapel_positie" value="2" />
            <label for="radio_dakkapel_positie_1">
            Voorkant
          </label>
        </div>
        <div class="option">
            <input type="radio" id="radio_dakkapel_positie_2" name="dakkapel_positie" value="3" />
            <label for="radio_dakkapel_positie_2">
            Achterkant
          </label>
        </div>
        <div class="option">
            <input type="radio" id="radio_dakkapel_positie_3" name="dakkapel_positie" value="4" disabled />
            <label for="radio_dakkapel_positie_3">
            Onderkant
          </label>
        </div>
    </fieldset>
</div>
 
<div class="dso-select {{ type }}">
  <fieldset>
    <legend>{{ setLabel }}</legend>
      {{#each options }}
        <div class="option">
          <input type="{{ ../inputType }}" id="{{radioId ../id @index }}" name="{{ ../id }}" value="{{ value }}"{{{ifattr ' disabled' disabled }}}{{{ifattr ' readonly' readonly }}}{{{ifattr ' checked' checked }}} /> 
          <label for="{{radioId ../id @index }}">
            {{ label }}
          </label>
        </div>
      {{/each}}
  </fieldset>
</div>
 
name: radio
id: dakkapel_positie
type: single
inputType: radio
setLabel: Waar wordt de dakkapel gebouwd?
options:
  - value: 1
    label: Zijkant
  - value: 2
    label: Voorkant
  - value: 3
    label: Achterkant
  - value: 4
    label: Onderkant
    disabled: true

There are no notes for this item.