SASS Toggles

Switches (Refactor Toggles for open-coding)

1. Reference Guide

Reference Table

Toggle Part	Semantic Tag	OCS SASS Utility Classes	Purpose / Example
Toggle Container	`<label>`	`ocs__toggle`	Holds the toggle input, track, and label together
Toggle Input	`<input type="checkbox">`	`ocs__toggle-input`	Controls whether the toggle is on or off
Toggle Track	`<span>`	`ocs__toggle-track`	Creates the visible switch that changes appearance when toggled
Toggle Label	`<span>`	`ocs__toggle-label`	Displays text describing what the toggle controls
Green Toggle	`<label>`	`ocs__toggle ocs__toggle--green`	Creates a toggle with the green checked-state style
Checked State	`<input>`	`:checked`	Detects when the toggle is turned on and changes its appearance
Toggle Status	`<output>`	`aria-live="polite"`	Displays the current toggle status and updates when the toggle changes

LxD Design Process

Empathize Toggles let users quickly turn a setting on or off. They are commonly used in apps and websites for things like:

Notifications
Dark Mode
Privacy settings
Battery settings
Website features

Define By the end of this lesson, students should know:

What a toggle is
How they work
How to implement one into their code
Proper uses for toggles

Ideate

HMW Question: How might we make creating toggles easier with SASS?
HMW Question: How might we help students understand how a toggle’s state affects a webpage?

Prototype / Test Create small interactive examples that connect toggles to visible page features and iterate based on student feedback.

College Board Connection

Learning how to create toggles builds skills that are useful for AP CS Principles. Selection allows a program to make decisions based on whether a condition is true or false. A SASS toggle is a visual example of this idea: when a toggle is switched, its state can be used as a condition to determine which behavior or appearance should occur.

For example:

View example code

<!-- //Fill in the blanks! -->
 
<label class="ocs__toggle ocs__toggle--green">
  <input id="toggle4" class="ocs__toggle-input" type="checkbox">
  <span class="ocs__toggle-track" aria-hidden="true"></span>
  <span class="ocs__toggle-label">It's a toggle!!!</span>
</label>

It's a toggle!!!

This connects to AP CSP objectives about selection and conditional behavior.

Lesson Plan

Learning Objective Understand how SASS toggle classes create an interactive on/off switch, use the OCS ocs__toggle classes to add a toggle to a webpage, and connect the toggle to JavaScript so that changing its state controls another element or feature.

Success Criteria By the end of the lesson, students should be able to explain what a toggle is and how it is useful, create a toggle using the OCS SASS shortcut, use JavaScript to detect whether a toggle is checked, and connect a toggle to a feature on a webpage.

Important

Calls the “ocs__toggle” class
- This is the class that holds the scss toggle code
Calls the “ocs__toggle-track” class
- Tracks whether the toggle is “checked” or not (checkbox).
Calls the “ocs__toggle-label” class
- Allows you to label your toggle, if necessary.

UI Runner

View example code

<!-- //Fill in the blanks! -->
 
<div>
  <label class="ocs__toggle ocs__toggle--green">
    <input id="toggle1" class="ocs__toggle-input" type="checkbox">
    <span class="ocs__toggle-track" aria-hidden="true"></span>
    <span class="ocs__toggle-label">Do you have family members who have or have had cancer?</span>
  </label>

  <label class="ocs__toggle ocs__toggle--green">
    <input id="toggle2" class="ocs__toggle-input" type="checkbox">
    <span class="ocs__toggle-track" aria-hidden="true"></span>
    <span class="ocs__toggle-label">Do you consume alcohol or use tobacco?</span>
  </label>

  <label class="ocs__toggle ocs__toggle--green">
    <input id="toggle3" class="ocs__toggle-input" type="checkbox">
    <span class="ocs__toggle-track" aria-hidden="true"></span>
    <span class="ocs__toggle-label">Do you forget to wear sunscreen?</span>
  </label>

  <label class="ocs__toggle ocs__toggle--green">
    <input id="toggle4" class="ocs__toggle-input" type="checkbox">
    <span class="ocs__toggle-track" aria-hidden="true"></span>
    <span class="ocs__toggle-label">Do you consume less than 48 oz of water and 30 grams of fiber a day?</span>
  </label>

  <br>

  <button id="checkRisk">Check Risk</button>

  <p id="riskOutput"></p>
</div>

<script>
  document.getElementById("checkRisk").addEventListener("click", function() {

    // Reset the risk to 0 every time the button is clicked
    let risk = 0;

    const toggles = document.querySelectorAll(".ocs__toggle-input");

    toggles.forEach(function(toggle) {
      if (toggle.checked) {
        risk += 25;
      }
    });

    // If no toggles are checked, risk stays at 0%
    document.getElementById("riskOutput").textContent =
      "Current Cancer Exposure Risk: " + risk + "%";
  });
</script>

Do you have family members who have or have had cancer? Do you consume alcohol or use tobacco? Do you forget to wear sunscreen? Do you consume less than 48 oz of water and 30 grams of fiber a day?

1. SASS Shortcut

Before making a toggle from scratch, you can use the OCS SASS shortcut.

<label class="ocs__toggle ocs__toggle--green">
  <input class="ocs__toggle-input" type="checkbox">
  <span class="ocs__toggle-track" aria-hidden="true"></span>
  <span class="ocs__toggle-label">My Label</span>
</label>

The SASS classes already handle most of the styling for you.

ocs__toggle → main toggle
ocs__toggle-input → checkbox that controls it
ocs__toggle-track → visible switch
ocs__toggle-label → text next to it
ocs__toggle--green → makes it green

So instead of writing all the SCSS yourself, you can just use the classes.

2. Putting It In Your Code

You can put the toggle wherever you want it on your page.

<label class="ocs__toggle ocs__toggle--green">
  <input id="notifications" class="ocs__toggle-input" type="checkbox">
  <span class="ocs__toggle-track" aria-hidden="true"></span>
  <span class="ocs__toggle-label">Notifications</span>
</label>

The checkbox keeps track of whether the toggle is on or off.

3. Simple Example

A basic use for a toggle could be turning notifications on or off.

<label class="ocs__toggle ocs__toggle--green">
  <input id="notifications" class="ocs__toggle-input" type="checkbox">
  <span class="ocs__toggle-track" aria-hidden="true"></span>
  <span class="ocs__toggle-label">Notifications</span>
</label>

The user can turn it on or off with one click.

4. Making It Do Something

The toggle can also control something else on the page.

For example, you could use one to show or hide a message.

<label class="ocs__toggle ocs__toggle--green">
  <input id="show-message" class="ocs__toggle-input" type="checkbox">
  <span class="ocs__toggle-track" aria-hidden="true"></span>
  <span class="ocs__toggle-label">Show Message</span>
</label>

<p id="message">This message can be turned on and off.</p>

<script>
const toggle = document.getElementById("show-message");
const message = document.getElementById("message");

toggle.addEventListener("change", () => {
  message.hidden = !toggle.checked;
});
</script>

Now the toggle actually changes something instead of just changing its appearance.

5. A Bigger Example

You could have multiple toggles for different settings.

<label class="ocs__toggle ocs__toggle--green">
  <input id="notifications" class="ocs__toggle-input" type="checkbox">
  <span class="ocs__toggle-track" aria-hidden="true"></span>
  <span class="ocs__toggle-label">Notifications</span>
</label>

<label class="ocs__toggle ocs__toggle--green">
  <input id="dark-mode" class="ocs__toggle-input" type="checkbox">
  <span class="ocs__toggle-track" aria-hidden="true"></span>
  <span class="ocs__toggle-label">Dark Mode</span>
</label>

Each toggle has its own ID, so you can connect each one to a different feature.

7. If You Want to Look at the SCSS

You don’t need to understand all of the SCSS to use the SASS toggle, but this is basically how it works.

The checkbox keeps track of the state:

input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}

The slider is the part you see:

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    border-radius: 100px;
    background: $gray4;
    transition: 0.4s;
}

Then :checked changes the slider when the checkbox is on:

&:checked + .slider {
    background: $blue1;
}

It can also move the circle:

&:checked + .slider:before {
    transform: translateX(27px);
}

So basically, the checkbox stores the state, :checked checks the state, and the SCSS changes what the toggle looks like.

Popcorn Hack (5 min)

Fill in the blanks!

Show answers

Answers: checkbox, slider, alignment, border-radius, white circle

Read the sentence aloud and fill in the blanks! Answers above.

The ___ on a toggle keeps track of whether it is on or off.
The ___ is the visible part of the toggle that changes color when it is turned on.
The .switch class controls the toggles position, size, padding, and ___.
The ___ Property makes the slider have rounded edges.
The &before class dictates the ___ of the toggle.

The Beauty of SASS

To use checkboxes or sliders all you need to do is use the class from SASS! This lets you focus on logic instead of repeating style over and over.

Challenge

## Find the Bug! The toggle is missing **one SASS class**. **Task:** Fix the HTML inside the quotes, then press **Run**. Expected result: **Toggle works! 🎉**

Lines: 1 Characters: 0

UI Output

💡 Answer Key

- `class="ocs__toggle-track"` — creates the visible track. - `aria-hidden="true"` — tells screen readers to ignore this part because it's only for decoration.

Challenge

## 🎨 Customize the Toggle Change the **green** color (`#22C55E`) to any color you want, then press **Run**. Try blue, purple, pink, or orange!

Lines: 1 Characters: 0

UI Output

2. Hex codes for color

Color	Hex Code
White	`#FFFFFF`
Black	`#000000`
Red	`#EF4444`
Orange	`#F97316`
Yellow	`#FACC15`
Green	`#22C55E`
Blue	`#3B82F6`
Purple	`#8B5CF6`
Pink	`#EC4899`
Gray	`#6B7280`

Challenge

Try connecting your toggle to something that actually exists in your file.

For example:

Show or hide an image
Show or hide text
Turn a section on or off
Change something on the page
Open or close a menu

Give the toggle and the thing you want to control IDs, then use JavaScript to connect them.

For example:

<label class="ocs__toggle ocs__toggle--green">
  <input id="image-toggle" class="ocs__toggle-input" type="checkbox">
  <span class="ocs__toggle-track" aria-hidden="true"></span>
  <span class="ocs__toggle-label">Show Image</span>
</label>

<img id="my-image" src="image.png" width="200">

<script>
const toggle = document.getElementById("image-toggle");
const image = document.getElementById("my-image");

toggle.addEventListener("change", () => {
  image.hidden = !toggle.checked;
});
</script>

When the toggle is on, the image shows. When it is off, the image hides.

The goal is to make the toggle actually do something in your file, which is also part of the lesson’s homework challenge.

7. Feedback Received

Toogles were functional but need stronger visual cues and labeling.
Homework was boring, repetitive and too easy.
Lesson wasn’t interactive.

8. Revisions Made

Toogles were updated to imrpove clarity, usability, and visual consistency.
Homework was updated to test the students understanding of what they learned.
UI runner popcorn hacks were turned into normal HTML code so students could interact more.

9. References / Sources

College Board. (2025). AP Computer Science Principles course and exam description. https://apcentral.collegeboard.org/pdf/ap-computer-science-principles-course-and-exam-description.pdf

College Board. (2025). AP Computer Science Principles exam. https://apcentral.collegeboard.org/courses/ap-computer-science-principles/exam

Homework

Create your own interactive toggle (from scratch), and put it on your page!

While writing this code, you will:

Make at least 3 toggles using the ocs__toggle SASS class. Make each toggle have its own label and purpose!
Use JavaScript to check whether each toggle is on or off and update something on your page based on the toggle’s status.
Add a section that shows how many toggles are currently turned on. Make sure this number updates when you flip a toggle!
Leave comments throughout the code, either explaining something new you learned, something you had questions about, how it works, or some other comment that provides insight and proof of understanding. (2 comments minimum.)
Ex. “I thought .checked was interesting because it lets JavaScript tell whether the toggle is currently turned on or off!”

Rubric 0.88 Completed all homework requirements stated above

.92 - Above and beyond!

Left extra (insightful) comments throughout the code of any kind.
Connects the toggle to a feature! This shows the highest form of mastery.
- In other words, your toggle actually toggles something. flipping the slider triggers a feature of some kind.

Submit Assignment

Need to update a submission later? Open the submissions dashboard.

Create Microblog Post

Reply to Post

Switches (Refactor Toggles for open-coding)

1. Reference Guide

LxD Design Process

College Board Connection

Lesson Plan

UI Runner

1. SASS Shortcut

2. Putting It In Your Code

3. Simple Example

4. Making It Do Something

5. A Bigger Example

7. If You Want to Look at the SCSS

Popcorn Hack (5 min)

The Beauty of SASS

Challenge

Challenge

2. Hex codes for color

Challenge

7. Feedback Received

8. Revisions Made

9. References / Sources

Homework

Submit Assignment