Interactive Toggle Switch

Published at 15 Jun 2026

Description
Explains what the challenge is about and what you need to build.

A toggle switch is a UI control that lets users turn something on or off — like enabling dark mode, turning notifications on, or switching between monthly and yearly billing. You see them everywhere in settings panels, mobile apps, and dashboards.

In this challenge, you will build an Interactive Toggle Switch from scratch. The switch must change its state when clicked, respond to keyboard input (Spacebar or Enter) when focused, and show a text label that updates instantly to reflect the current state.

Requirements
Lists the specific elements, IDs, and behaviors your solution must include to pass the tests.

Checkbox element with ID #switch-input that reflects the checked state.
Switch label container with ID #switch-label wrapping the checkbox.
Text display span with ID #status-text showing 'ON' when checked, 'OFF' when unchecked.
Implement a visual sliding transition on the switch indicator pin when toggled.
The switch track must change background color when checked (e.g., gray to green).
The indicator pin must use CSS transition for smooth sliding animation.
A click on the label must toggle the checkbox state.
When focused, pressing Spacebar or Enter must toggle the switch.

Example Demo

User Flow

Step-by-step Flow Explanation:

Initial Load: The switch starts unchecked. #status-text displays 'OFF', the pin sits on the left, and the track is gray.
Click Switch: User clicks the toggle switch. The checkbox becomes checked, #status-text changes to 'ON', the pin slides to the right, and the track turns green.
Keyboard Toggle: User tabs to focus the switch and presses Spacebar. The switch toggles back to unchecked, reversing the visual changes.
Verification: The test suite checks that #switch-input.checked matches the expected state, #status-text content flips correctly, and the CSS transition classes are applied.

Related UI Challenges

Fixing Bug

Discussion (0)

Join the Discussion

index.html

style.css

script.js

Loading Monaco Workspace...

Live Preview Browser

Tests & Console Output

Click to expand

Test Assertion	Status	Details/Errors
Required DOM Elements exist (#switch-input, #switch-label, #status-text)	Pending	Pending execution
Component layout compiles and renders successfully with custom CSS styles	Pending	Pending execution
Interactive JavaScript logic and event listeners are implemented	Pending	Pending execution