FormsLesson 139Free preview
Toggle Switch
This lesson is part of How To · All levels
Summary
A toggle switch is an on/off control made of checkboxes and slider elements. The checkbox keeps the actual status, while the slider displays the position of the button and the background color. Pseudo-class: checked moves the knob and changes color when the switch is activated.
Key points
- The checkbox becomes an on/off status source that can be sent along with the form.
- The label wrapped the checkbox and slider so the entire switch could be clicked.
- Slider uses the before as a button that is pulled by the transform.
- :checked + .slider change the color and position of the knob.
- Include a focus-visible so that the switch can be used with the keyboard.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.