Designsystem

Toggle switch 

<div class="input-group">
    <label for="toggle-switch">Combles</label>
    <div class="inputSwitch">
        <div class="inputSwitch-choice">
            <input class="inputSwitch-choice-input" type="radio" name="toggle-switch" id="toggle-switch_1" checked="checked" value="1">
            <label class="inputSwitch-choice-label" for="toggle-switch_1">Perdus</label>
        </div>
        <div class="inputSwitch-choice">
            <input class="inputSwitch-choice-input radio" type="radio" name="toggle-switch" id="toggle-switch_2" value="2">
            <label class="inputSwitch-choice-label " for="toggle-switch_2">Habités</label>
        </div>
    </div>
</div>
 
<div class="input-group">
    {{#if switch.label}}<label for="{{switch.name}}">{{switch.label}}</label>{{/if}}
    <div class="inputSwitch">
        <div class="inputSwitch-choice">
            <input class="inputSwitch-choice-input" type="radio" name="{{switch.name}}" id="{{switch.name}}_1" checked="checked" value="1">
            <label class="inputSwitch-choice-label" for="{{switch.name}}_1">{{switch.val1}}</label>
        </div>
        <div class="inputSwitch-choice">
            <input class="inputSwitch-choice-input radio" type="radio" name="{{switch.name}}" id="{{switch.name}}_2" value="2">
            <label class="inputSwitch-choice-label " for="{{switch.name}}_2">{{switch.val2}}</label>
        </div>
    </div>
</div>
 
{
  "switch": {
    "label": "Combles",
    "name": "toggle-switch",
    "val1": "Perdus",
    "val2": "Habités"
  }
}

There are no notes for this item.