Interactive Toggle Switch

. Use the :checked pseudo-class to style the switch track and pin. When checked, slide the pin using transform: translateX() and change the background colour. This is the most accessible since the checkbox is natively focusable and keyboard-operable. Approach 2: Pure JavaScript State Use a click event listener on the switch container. Maintain a boolean (isOn) to track state. Toggle it on each click, update #status-text, and toggle a CSS class for the visual. Add a keydown listener for Space/Enter for keyboard support. Approach 3: Vue 3 Reactive (Vue stack) Use ref() for isOn. Bind checkbox :checked with v-model. Use a computed property for the status text. Toggle a CSS class with :class="{ active: isOn }". Vue handles reactivity so the UI updates automatically.