In-app notifications are disabled
Toggle switches are two-state controls. Semantically they behave the same way as a single checkbox. The main advantage of a toggle switch over checkboxes is it makes the interaction more obvious to the user, and it can be designed to have a larger target area. When using toggle switches, keep in mind that a lot of applications choose to take immediate effect. This means that there is no secondary action (e.g., "Save", "Apply filter", etc.). We assume that users are expecting this behavior when they are operating toggle switches.
Toggle switches can be styled different ways. They may include a label for each state in the switch, or be blank. When using text labels, it is imperative to ensure they are readable. The text size should ideally be the same as the surrounding text, and no less than 14px. When using icons, we must ensure they are unambiguous, and they have sufficient contrast to the background for both states. We must not rely solely on color to indicate the state. The typical color usage for toggle switches is to have a high-contrast accent color in the on state and no color in the off state.
In this example, we use a color-only version of the checkbox. We use the gray background to signal the off state, but we keep the button white so that it stands out, and so that it does not look disabled.