A toggle is a user interface control that lets people choose between a pair of opposing states, like on and off, using a different appearance for each state. When used properly, toggles make it easy for users to update settings, views, and content in your app or site. However, when used poorly, they can lead to confusion and frustration. Toggle controls should be clear, concise, and deliver immediate results. The toggle label should clearly identify the option the toggle control controls, and it should also describe what state the switch is currently in. The switch should be immediately visible in its current state, and it should change visual appearance when its state changes.
When choosing a font size for your toggle’s labels, use the smallest size that can be clearly read at the distance at which users typically view toggle switches. Using a small font size helps the toggle’s appearance stay consistent across platforms and devices. It also helps prevent users from mistaking the toggle for a button that has been clicked, which can lead to frustrating errors and confusion.
Whenever possible, avoid using toggles in forms that require a click on a Save or Confirm button for changes to take effect. This can cause user frustration when it takes longer than expected for the toggle to update its state. If this is unavoidable, add a loading indicator or other UI element that indicates the toggle is in the process of changing its state.
