Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

Switch

Use Switches to provide a quick way to “switch” between enabled and disabled states. Switches are the best components when the user is intended to turn on or off something with an immediate effect.

The best way to check if the Switch component is appropriate is to imagine whether a physical switch would behave the same way.

Default

Copy Pug
Copy HTML
Show code
Hide code
.e-switch

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

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

Variations

With label
Copy Pug
Copy HTML
Show code
Hide code

<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">
    Lorem ipsum dolor
  </label>
</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">Lorem ipsum dolor</label></div>

Choose from two options
Copy Pug
Copy HTML
Show code
Hide code
.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 class="e-switch__input" id="switch-choose" type="checkbox" name="consent" value="1">
    <label class="e-switch__toggle" for="switch-choose"></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 class="e-switch__input" id="switch-choose" type="checkbox" name="consent" value="1"><label class="e-switch__toggle" for="switch-choose"></label></div><label onclick="if(!document.getElementById('switch-choose').disabled) document.getElementById('switch-choose').checked=true">ipsum</label></div>

With label - disabled
Copy Pug
Copy HTML
Show code
Hide code
:disabled

<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">
    Lorem ipsum dolor
  </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">Lorem ipsum dolor</label></div>

Choose from two options - disabled
Copy Pug
Copy HTML
Show code
Hide code
.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 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">
    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 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">ipsum</label></div>

Related components

CheckboxRadio

Switch

Use Switches to provide a quick way to “switch” between enabled and disabled states. Switches are the best components when the user is intended to turn on or off something with an immediate effect.

The best way to check if the Switch component is appropriate is to imagine whether a physical switch would behave the same way.

Structure

  1. Label
  2. Knob
  3. Guide rail

Best practices

Switches should:

  • Never require users to press a submit Button to apply the setting of the Switch. In those cases use a Checkbox instead.
  • Apply their effect immediately until intentional withdrawal. Switches should be self-submitting and revocable anytime but until then, their state should affect the behaviour of the application.
  • Be labeled with a positive statement, like "Activate [something]"", "Enable [something]"". Don’t use negative statements for Switch labels, like "Disable [something]"".
  • Act as a on-off switch. If the turned-off state of the Switch is NOT the negation of the statement in the label, but an alternative option, then a Radio button-like interaction should be used to describe both states.
  • Indicate that they are turned off with the knob positioned left and the background colored grey. Knob on the right and green background indicate that the Switch is turned on.

Try to avoid:

  • Placing a Switch inside a form that needs to be saved anyway. This may confuse the users about the actual status.
  • Using Switches to show/hide UI elements. Use Button Radios or Checkboxes (in forms) instead.
  • Using a group of Switches for exclusive selection. Use a group of Checkboxes or Radios instead.