Interrupteurs

Anatomy

A switches toggle component has a simple anatomy. It consists of :

1. A track
2. A handle
3. A label

The switches toggle size can change depending on the user’s device. Usually, the size of the radio button for desktops is 20×52 pixels so the user can click it easily and see it clearly. But the target area should have a minimm size of 48px.

Switches toggle states :

A switches toggle has 6 types of selections associated with it:

• Unactive : When the switches toggle isn’t active
• Active : When the switches toggle is active
• Hovered : When the switches toggle is hovered by your cursor
• Focused : When a user selects the rswitches toggle using a keyboard (usually with the Tab key) or other assistive tools
• Disabled : When the switches toggle is not available for interaction
• Selected & Disabled : This is a situation where the switches toggle option is selected but disabled for interactions.

Best practices for Switches toggle design

Keep it simple

As a designer, you want to make things stand out, and you investigate new, groundbreaking ways to do things.
However, this isn’t the case when you work on switches toggle design. This is because this component is a very common one, and many people know how to use it. So, keep things as simple as possible so the users will understand its function quickly.

Indicate the action selection required

If the user has to select an action to make from a switches toggle group, mention it. By doing so, they’ll understand which action they must select. This ensures the user knows what to do to complete the task:

Make the label clickable

Clickable labels enable users to select the right option more easily because they can click or tap on a larger area:

Truncated label

Why it should be avoided?

When text is truncated, users may:

• Misinterpret information
• Make wrong choices
• Feel frustrated or slowed down

Key idea:

Users should not have to guess or work to understand content.

When to use Switches toggle ?

Switches toggle allow users to select only one state of the action "Yes" or "No" / "Off" or "On".

Switch Label Text

Don’t: Place the label text inside the switch itself, as the font would be too small for accessibility. Use an external label or an appropriate icon instead.