A toggle is a switch with two positions: on and off. It is often used to alternate between functions in software, and it’s common for hardware settings (such as the caps lock or num lock keys) to be controlled by toggle switches. The word toggle is also commonly used to describe switching between different aspects of a task, such as toggling between screen shots during a video call or toggling between a stream and map view on an app.

Toggles are a good choice when you want to give users the ability to change system settings or preferences (e.g. enabling or disabling Airplane Mode). They are generally easier to use on mobile because they take up less screen space than two radio buttons and provide immediate results. However, when you do choose to use toggles on your site or app, make sure the labels clearly identify the intended effect—either on or off—and that they are easy to read. High-contrast colors are often preferred for the on/off states of a toggle, and it’s helpful to include clear state descriptors next to each toggle.

It’s important to consider societal and cultural context when using toggles. For example, choosing a red toggle for the on position may be counterintuitive to some cultures, which might associate it with stop signs or stop lights. Also, it’s important to think about the amount of time a user will spend with a toggle—if a toggle takes too long to change states, users might become frustrated.

A toggle widget displays text in a collapsed form, allowing users to expand or hide its content. It can be a great alternative to an accordion widget when you have more content to display, or if you don’t want to clutter your page with multiple options. It’s also easier to style a toggle widget than an accordion widget, so you don’t have to worry about matching the style of other elements on your website or app. Lastly, you can easily add or delete items from the list, as well as drag and drop them to rearrange their order. This makes it easier for your team to keep track of all the different settings, preferences, and features in your product.