Switch

Default .e-switch

<div class="e-field">
  <div class="e-switch">
    <input id="switch" type="checkbox" name="consent" value="1" class="e-switch__input">
    <label for="switch" class="e-switch__toggle"></label>
  </div>
</div>

                        <div class="e-field">
                          <div class="e-switch">
                            <input id="switch" type="checkbox" name="consent" value="1" class="e-switch__input">
                            <label for="switch" class="e-switch__toggle"></label>
                          </div>
                        </div>

Variations

With label

<div class="e-field">
  <div class="e-switch">
    <input id="switch-withlabel" type="checkbox" name="consent" value="1" class="e-switch__input">
    <label for="switch-withlabel" class="e-switch__toggle"></label>
  </div>
  <label for="switch-withlabel" class="e-field__label-inline">
    Lorem ipsum dolor
  </label>
</div>

                          <div class="e-field">
                            <div class="e-switch">
                              <input id="switch-withlabel" type="checkbox" name="consent" value="1" class="e-switch__input">
                              <label for="switch-withlabel" class="e-switch__toggle"></label>
                            </div>
                            <label for="switch-withlabel" class="e-field__label-inline">Lorem ipsum dolor</label>
                          </div>

Choose from two options .e-switch-choose

<div class="e-field">
  <label onclick="if(!document.getElementById('switch-choose').disabled) document.getElementById('switch-choose').checked=false">
    lorem
  </label>
  <div class="e-switch e-switch-choose">
    <input id="switch-choose" type="checkbox" name="consent" value="1" class="e-switch__input">
    <label for="switch-choose" class="e-switch__toggle"></label>
  </div>
  <label onclick="if(!document.getElementById('switch-choose').disabled) document.getElementById('switch-choose').checked=true">
    ipsum
  </label>
</div>

                          <div class="e-field">
                            <label onclick="if(!document.getElementById('switch-choose').disabled) document.getElementById('switch-choose').checked=false">lorem</label>
                            <div class="e-switch e-switch-choose">
                              <input id="switch-choose" type="checkbox" name="consent" value="1" class="e-switch__input">
                              <label for="switch-choose" class="e-switch__toggle"></label>
                            </div>
                            <label onclick="if(!document.getElementById('switch-choose').disabled) document.getElementById('switch-choose').checked=true">ipsum</label>
                          </div>

With label - disabled :disabled

<div class="e-field">
  <div class="e-switch">
    <input id="switch-withlabel-disabled" disabled type="checkbox" name="consent" value="1" class="e-switch__input">
    <label for="switch-withlabel-disabled" class="e-switch__toggle"></label>
  </div>
  <label for="switch-withlabel-disabled" class="e-field__label-inline">
    Lorem ipsum dolor
  </label>
</div>

                          <div class="e-field">
                            <div class="e-switch">
                              <input id="switch-withlabel-disabled" disabled type="checkbox" name="consent" value="1" class="e-switch__input">
                              <label for="switch-withlabel-disabled" class="e-switch__toggle"></label>
                            </div>
                            <label for="switch-withlabel-disabled" class="e-field__label-inline">Lorem ipsum dolor</label>
                          </div>

Choose from two options - disabled .e-switch-choose:disabled

<div class="e-field">
  <label onclick="if(!document.getElementById('switch-choose-disabled').disabled) document.getElementById('switch-choose-disabled').checked=false">
    lorem
  </label>
  <div class="e-switch e-switch-choose">
    <input id="switch-choose-disabled" disabled type="checkbox" name="consent" value="1" class="e-switch__input">
    <label for="switch-choose-disabled" class="e-switch__toggle"></label>
  </div>
  <label onclick="if(!document.getElementById('switch-choose-disabled').disabled) document.getElementById('switch-choose-disabled').checked=true">
    ipsum
  </label>
</div>

                          <div class="e-field">
                            <label onclick="if(!document.getElementById('switch-choose-disabled').disabled) document.getElementById('switch-choose-disabled').checked=false">lorem</label>
                            <div class="e-switch e-switch-choose">
                              <input id="switch-choose-disabled" disabled type="checkbox" name="consent" value="1" class="e-switch__input">
                              <label for="switch-choose-disabled" class="e-switch__toggle"></label>
                            </div>
                            <label onclick="if(!document.getElementById('switch-choose-disabled').disabled) document.getElementById('switch-choose-disabled').checked=true">ipsum</label>
                          </div>

Related components

CheckboxRadio

Last update

Message style(scss): lint fixes
Date:
()
Committer: Tamás Bíró
Component history