Skip to main contentSkip to site searchSkip to component search
Honeycomb

Switch

Switches allow users to toggle between two states, on or off.

Details

For switch implementation we purely rely on native browser behaviour, element is done via combination of a checkbox input and label HTML element. 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 type="checkbox" class="flix-switch__input" id="flix-switch-default" name="flixSwitch"/>
  <label class="flix-switch__label" for="flix-switch-default">Switch</label>
  <span class="flix-switch__info">Additional info text</span>
</div>
Additional info text 
<div class="flix-switch">
  <input type="checkbox" class="flix-switch__input" id="flix-switch-check" checked="" name="flixSwitch"/>
  <label class="flix-switch__label" for="flix-switch-check">Switch</label>
  <span class="flix-switch__info">Additional info text</span>
</div>
<div class="flix-switch flix-switch--disabled">
  <input type="checkbox" class="flix-switch__input" id="flix-switch-disabled" disabled="" name="flixSwitch"/>
  <label class="flix-switch__label" for="flix-switch-disabled">Switch disabled</label>
</div>
Additional info text 
<div class="flix-switch flix-switch--stacked">
  <input type="checkbox" class="flix-switch__input" id="flix-switch-stacked" checked="" name="flixSwitch"/>
  <label class="flix-switch__label" for="flix-switch-stacked">Switch stacked</label>
  <span class="flix-switch__info">Additional info text</span>
</div>

Smaller switch (sm)

Additional info text 
<div class="flix-switch flix-switch--sm">
  <input type="checkbox" class="flix-switch__input" id="flix-switch-small" checked="" name="flixSwitch"/>
  <label class="flix-switch__label" for="flix-switch-small">I do big things!</label>
  <span class="flix-switch__info">Additional info text</span>
</div>
Made with 🍯 by FlixMobility 2023