Switch

Switch or Checkbox?

• Use a switch to let people toggle a setting that takes effect immediately, like a light switch
• Use a checkbox to let people toggle a selection that must be saved before taking effect

Switch Labels

Label Dos

• Always have a label for the switch
• Use sentence case
• Keep labels short and easy to scan
• Use a leading verb only when it clarifies the switch’s purpose

Label Don’ts

• Don’t end labels with punctuation
• Avoid labels that describe the switch’s “on” state (e.g. “Turn on” or “Enable”)
• Don’t update the label dynamically based on a switch’s checked state

With Cypress

Adding data-test-id to a component

To test sl-switch, add the data-test-id attribute directly to the component:

  sl-switch[
    data-test-id="switch-test"
  ] 
    | Switch test

Cypress commands for sl-switch

Because sl-switch uses <input type="checkbox">, we can test the switch the same way we would test the checkbox.

To toggle the switch ON:

  cy.slCheckboxCheck(`[data-test-id="switch-test"]`);

To toggle the switch OFF::

  cy.slCheckboxUncheck(`[data-test-id="switch-test"]`);

To verify the switch is ON:

  cy.get(`[data-test-id="switch-test"]`).should("have.prop", "checked", true);

To verify the switch is OFF:

  cy.get(`[data-test-id="switch-test"]`).should("have.prop", "checked", false);