Toggle

Overview

The MYDS HTML/CSS Toggle (Switch) is a lightweight, accessible interaction component used to toggle between two states. It is built using semantic HTML (checkboxes) and CSS transitions to provide a native-feel experience with three standardized sizes.

1. Setup

Import the following stylesheets to ensure the toggle displays correctly.

<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="./toggle.css">
<link rel="stylesheet" href="./toggle-dark.css">

This guarantees that:

1. The CSS reset applies first.
2. The toggle base styles override the reset where necessary.
3. The dark theme styles apply last, so they can override both the reset and base button styles when needed.

2. Usage

To implement a toggle, wrap a hidden input and a track span inside a label. Apply the size modifier (sm, md, or lg) to both the label and the track.

<label class="toggle-label-myds toggle-md-myds">
  <input type="checkbox" class="toggle-input-myds">
  <span class="toggle-track-myds track-md-myds">
    <span class="toggle-thumb-myds"></span>
  </span>
</label>

3. Sizes

Small (sm)

Medium (md)

Large (lg)

4. States

The toggle handles the following states automatically through the native checkbox:

• Unchecked: Default state with a neutral gray track.
• Checked: Primary blue track with the thumb translated horizontally.
• Hover: Subtle background color shift on the track.
• Focused: Accessible 2px ring visible during keyboard navigation (Tab).
• Disabled: Input becomes non-interactive (Add disabled attribute to the input).

5. Anatomy

6. Customization

You can change the "active" color by overriding the checked state:

.toggle-input-myds:checked + .toggle-track-myds {
  background-color: #10b981; /* Changes blue to emerald */
}

7. Accessibility

• Semantic: Uses <input type="checkbox"> so screen readers identify it as a toggle/switch.
  • Keyboard Support: Fully navigable via Space and Tab.
  • Aria-Labels: For better UX, it is recommended to add aria-label="Toggle setting name" to the input.