Switch
Switches allow users to toggle between two states, on or off.
For switch implementation we rely on native browser behaviour via a combination of a checkbox input and label HTML element.
The component consists of 1 core flix-switch and 2 child elements:
flix-switch__input;flix-switch__label;
input[type="checkbox"] checked attribute is used in order to control component's active state.
Available modifiers:
-
flix-switch--sm - enables small sized switch.
-
flix-switch--stacked - toggles alternative label position.
-
flix-switch--disabled - triggers disabled variation
Normal switch
Additional info text
<div class="flix-switch">
<input class="flix-switch__input" id="flix-switch-default" type="checkbox" name="flixSwitch" aria-describedby="flix-switch-default-info"/>
<label class="flix-switch__label" for="flix-switch-default">Switch</label>
<span class="flix-switch__info" id="flix-switch-default-info">Additional info text</span>
</div>
Additional info text
<div class="flix-switch">
<input class="flix-switch__input" id="flix-switch-check" type="checkbox" name="flixSwitch" aria-describedby="flix-switch-check-info" checked=""/>
<label class="flix-switch__label" for="flix-switch-check">Switch</label>
<span class="flix-switch__info" id="flix-switch-check-info">Additional info text</span>
</div>Disabled
<div class="flix-switch flix-switch--disabled">
<input class="flix-switch__input" id="flix-switch-disabled" type="checkbox" disabled="" name="flixSwitch"/>
<label class="flix-switch__label" for="flix-switch-disabled">Switch disabled</label>
</div>Stacked
Additional info text
<div class="flix-switch flix-switch--stacked">
<input class="flix-switch__input" id="flix-switch-stacked" type="checkbox" name="flixSwitch" aria-describedby="flix-switch-stacked-info" checked=""/>
<label class="flix-switch__label" for="flix-switch-stacked">Switch stacked</label>
<span class="flix-switch__info" id="flix-switch-stacked-info">Additional info text</span>
</div>Small
Additional info text
<div class="flix-switch flix-switch--sm">
<input class="flix-switch__input" id="flix-switch-small" type="checkbox" name="flixSwitch" aria-describedby="flix-switch-small-info" checked=""/>
<label class="flix-switch__label" for="flix-switch-small">I do big things!</label>
<span class="flix-switch__info" id="flix-switch-small-info">Additional info text</span>
</div>