Link copied!

Switch Examples

<div>
  <div class="e-field">
    <e-switch data-id="newsletter" value="signed" name="newsletter" checked></e-switch>
  </div>
</div>
<div>
  <div class="e-field">
    <e-switch data-id="newsletter" value="signed" label="Switch Label" name="newsletter" checked></e-switch>
  </div>
</div>
<div>
  <div class="e-field">
    <e-switch data-id="theme" value="mode" label="Light Mode" label-secondary="Dark Mode" name="theme"></e-switch>
  </div>
</div>
<div>
  <div class="e-field">
    <e-switch data-id="newsletter" value="signed" label="Switch Label" name="newsletter" disabled></e-switch>
  </div>
</div>
<div>
  <div class="e-field">
    <e-switch label="Switch Label" helper="This does not affect critical notifications"></e-switch>
  </div>
</div>
<div class="e-field">
  <e-switch data-id="newsletter" value="signed" label="Switch Label"  name="newsletter" checked></e-switch>
  <span class="e-field__message e-field__message-error">
    The change couldn't be applied, please try again.
  </span>
</div>
<div class="e-field">
  <div class="e-switch">
    <input class="e-switch__input" id="default-switch" type="checkbox" name="consent" value="1">
    <label class="e-switch__toggle" for="default-switch"></label>
  </div>
</div>
<div class="e-field">
  <div class="e-switch">
    <input class="e-switch__input" id="switch-withlabel" type="checkbox" name="consent" value="1">
    <label class="e-switch__toggle" for="switch-withlabel"></label>
  </div>
  <label class="e-field__label-inline" for="switch-withlabel">
    Switch Label
  </label>
</div>
<div class="e-field">
  <label class="e-field__label-inline" onclick="if(!document.getElementById('switch-choose').disabled) document.getElementById('switch-choose').checked=false">
    Switch Label One
  </label>
  <div class="e-switch e-switch-choose">
    <input class="e-switch__input" id="switch-choose" type="checkbox" name="consent" value="1">
    <label class="e-switch__toggle" for="switch-choose"></label>
  </div>
  <label class="e-field__label-inline" onclick="if(!document.getElementById('switch-choose').disabled) document.getElementById('switch-choose').checked=true">
    Switch Label Two
  </label>
</div>
<div class="e-field">
  <div class="e-switch">
    <input class="e-switch__input" id="switch-withlabel-disabled" disabled type="checkbox" name="consent" value="1">
    <label class="e-switch__toggle" for="switch-withlabel-disabled"></label>
  </div>
  <label class="e-field__label-inline" for="switch-withlabel-disabled">
    Switch Label
  </label>
</div>
<div class="e-field">
  <div class="e-switch">
    <input class="e-switch__input" id="switch-withlabel-disabled" disabled type="checkbox" name="consent" value="1" checked>
    <label class="e-switch__toggle" for="switch-withlabel-disabled2"></label>
  </div>
  <label class="e-field__label-inline" for="switch-withlabel-disabled2">
    Switch Label
  </label>
</div>
<div class="e-field">
  <label onclick="if(!document.getElementById('switch-choose-disabled').disabled) document.getElementById('switch-choose-disabled').checked=false">
    Switch Label One
  </label>
  <div class="e-switch e-switch-choose">
    <input class="e-switch__input" id="switch-choose-disabled" disabled type="checkbox" name="consent" value="1">
    <label class="e-switch__toggle" for="switch-choose-disabled"></label>
  </div>
  <label onclick="if(!document.getElementById('switch-choose-disabled').disabled) document.getElementById('switch-choose-disabled').checked=true">
    Switch Label Two
  </label>
</div>
<div style="width: 100px">
  <div class="e-field e-field-flex">
    <div class="e-switch e-switch-flex">
      <input class="e-switch__input" id="switch-flex" type="checkbox" name="consent" value="1">
      <label class="e-switch__toggle" for="switch-flex"></label>
    </div>
    <label class="e-field__label-inline" for="switch-flex">
      Switch Label
    </label>
  </div>
</div>