Using Toggle Switches in Web Forms

A toggle is a switch that allows users to change the state of an object—either on or off. Toggles are more commonly used for binary actions, but they can also be used for a range of other settings or preferences. For example, users may toggle between a full-screen experience and a compact view in an email app.

In general, it’s best to avoid using toggles for complex options where users will need to tap the toggle multiple times to apply a new state. In these cases, a radio button or checkbox might be more appropriate.

When you’re using a toggle, it’s important to ensure that the label text and action text are clearly describing what will happen when the user flips the toggle. This will prevent confusion for the users as they interact with your interface. Toggle switches often appear in forms or within full pages of information, so the labels should be short and descriptive to ensure that they are understood by the users.

Similarly, the action text should be clearly describing what will happen when the toggle is clicked. Oftentimes, action text is too long or vague, which can lead to confusion when it’s paired with a toggle that requires multiple clicks to apply a new state.

If you’re using a toggle to display a question description, we recommend adding the option to initially hide the description so that participants don’t need to click the toggle several times before they understand what the question is asking them. For more on this topic, please see our article on Accessible Toggle Switches.