Every design system should include the switch component. This component, also called a toggle component, is a small and basic component commonly used on mobile devices and desktop apps, and it is used to enable and disable different options.

This article focuses on the switch component, its basics, the UI design, and some best practices.

Switch component basic structure

The switch component consists of a track and a thumb. The thumb travels along the track to indicate its current status. It is possible to design this component with an indicator inside the thumb or the track to explain the status, but in most design systems, the basic design is used.

Switch component basic structure

State and possibilities

In most design system documentation I have read, the common statuses are enabled, disabled, and focus. Additionally, there are two statuses in Google material design, hover and pressed.

Switch component states

Best practices

• In general, the switch has only two states: on and off. Some products may require an Intermediate state, but this is only needed in edge cases. You can see this case in the Figma properties panel. The user can select two instances, one with the on and the other with the off. In this case, an intermediate state is needed.

Intermediate state From Figma

• Switches are used to make a change immediately. It is not necessary to confirm the action. The change should be applied immediately.

Switches are used to make a change immediately

• Use clear colors to indicate the on and off state to the user. For example, in iOS, you can see the green color for ON State and the gray for the OFF state.

Use clear colors to indicate the on and off state to the user.

• To indicate the switch’s purpose, provide a clear label. The microcopy should explain well what the function will do. The option for the toggle must be only on or off.

Provide a clear label

• The switch should be large enough to be easily tapped or clicked by the user.

The switch component should be easy to tap or click

The difference between the Switch component, radio button, and checkbox

Checkboxes and radio buttons belong to the same family of components, so let’s learn how they differ.

• Checkboxes are used when users need to select one or more options from a list of options. For example, selecting multiple items from a list of items. Unlike the switch component, which toggles between two options, on or off.
• The switch component toggles between two states, while the radio button selects one option from a list of mutually exclusive options. For example, use a radio button to select a single option from a list of options in a survey or a form.
• A switch component is activated by clicking or tapping on it. In most cases, a radio button or checkbox is activated after the user clicks on another button after making a choice. For example, a submit button on a form.
• The switch component and radio buttons have a default value, while checkboxes do not.

To summarize

In this article, we talked about the component switch (Toggle). As a first step, I explained its basic structure and the states (enable, disable, etc.). We then discussed best practices and the differences between checkboxes, radio buttons, and switch components.

Below you will also find some great links to explore more information about switch components.

To read more