9 unit-toggle
The toggle unit.
9.1 Core
The core module.
9.1.1 Default style
The default style.
default
<!-- single -->
<span class="unit-toggle">
<input class="unit-toggle__field" type="radio" name="toggle" value="1" />
</span>
<!-- single (legacy) -->
<span class="unit-toggle">
<input class="unit-toggle__field" type="radio" name="toggle" value="2" />
<span class="unit-toggle__alt"><!-- Alt element is not use. --></span>
</span>
<!-- single:disabled -->
<span class="unit-toggle">
<input class="unit-toggle__field" type="radio" name="toggle" value="3" checked="checked" disabled="disabled" />
</span>
<!-- with label -->
<label class="unit-text unit-text--inline-block">
<span class="unit-toggle">
<input class="unit-toggle__field" type="radio" name="toggle" value="4" />
</span>
Lorem ipsum dolor sit amet.
</label>9.2 Radio
The radio module.
9.2.1 Modifiers
The radio modifiers.
default
unit-toggle--radio-normal
Normal radio
<!-- single -->
<span class="unit-toggle {{modifier_class}}">
<input class="unit-toggle__field" type="radio" name="{{modifier_class}}" value="1" />
</span>
<!-- single (legacy) -->
<span class="unit-toggle {{modifier_class}}">
<input class="unit-toggle__field" type="radio" name="{{modifier_class}}" value="2" />
<span class="unit-toggle__alt"><!-- Alt element is not use. --></span>
</span>
<!-- single:disabled -->
<span class="unit-toggle {{modifier_class}}">
<input class="unit-toggle__field" type="radio" name="{{modifier_class}}" value="3" checked="checked" disabled="disabled" />
</span>
<!-- with label -->
<label class="unit-text unit-text--inline-block">
<span class="unit-toggle {{modifier_class}}">
<input class="unit-toggle__field" type="radio" name="{{modifier_class}}" value="4" />
</span>
Lorem ipsum dolor sit amet.
</label>9.3 Check
The check module.
9.3.1 Modifiers
The check modifiers.
default
unit-toggle--check-normal
Normal check
<!-- single -->
<span class="unit-toggle {{modifier_class}}">
<input class="unit-toggle__field" type="checkbox" name="{{modifier_class}}" value="1" />
</span>
<!-- single (legacy) -->
<span class="unit-toggle {{modifier_class}}">
<input class="unit-toggle__field" type="checkbox" name="{{modifier_class}}" value="2" />
<span class="unit-toggle__alt"><!-- Alt element is not use. --></span>
</span>
<!-- single:disabled -->
<span class="unit-toggle {{modifier_class}}">
<input class="unit-toggle__field" type="checkbox" name="{{modifier_class}}" value="3" checked="checked" disabled="disabled" />
</span>
<!-- with label -->
<label class="unit-text unit-text--inline-block">
<span class="unit-toggle {{modifier_class}}">
<input class="unit-toggle__field" type="checkbox" name="{{modifier_class}}" value="4" />
</span>
Lorem ipsum dolor sit amet.
</label>