Welcome to pay attention to the rich way Web development team, PHP, front-end need you. Lack of people crowd

Forms have built-in controls that make it easy to collect user input. Using the right controls can also be a challenge in form design.

The checkbox has three states: unselected, selected, and undetermined. The last state indicates that the child option is in the parent group and that the child option is in the intermediate state between selected and unselected.

Toggle is a physical switch that allows the user to turn it on and off like a light.

Listening to the Toggle switch performs two operations: select and execute, whereas checkbox simply selects an option and requires another control to execute.

When deciding whether to checkbox or toggle, it’s best to focus on specific situations rather than features.

Here are some use cases and some guidelines for deciding which controls to use when designing a form.

Case 1: Timely feedback

These are the situations where you need toggle

  • Application Settings do not require explicit action to take effect immediately.
  • Settings need to be on/off or show/hide to show the effect.
  • The selection can take effect without verification.

Toggle is best when you need an immediate response

Case 2: Settings need to be confirmed

The following cases require checkboxes

  • Application Settings require user confirmation and approval before submission.
  • Before the defined Settings take effect, some action is required, such as clicking Submit, OK, or next.
  • The user must perform additional actions for the changed changes to take effect.

Checkbox is preferred if some explicit action is required to invalidate the application

Case 3: Multiple choices

The following cases require checkboxes

  • In multi-select users need to select one or more options.
  • To play toggle, you have to click one click at a time, and each click takes an extra time to see the effect.

Checkbox is used to select multiple options in the list

Case 4: Uncertain state

“Using better toggle switch design can solve this problem. Displaying on/off statements improves clarity. Microsoft has the right idea: https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/toggles”

The following cases require checkboxes

  • Uncertain selection status requires multiple suboptions in the parent option group. This indeterminate state means that sub-options need to be selected (not all of them).

Uncertain states are best displayed with checkboxes

Case 5: Clear vision

The following cases require checkboxes

  • There is one kind of situation that makes the toggle switch state confusing. Sometimes it is difficult to distinguish whether the switch shows the state or needs to be operated.
  • You need to provide a clear distinction between selected and unselected states.

Sometimes toggle can’t clearly indicate whether it’s a state or an operation.

“That’s the main problem with toggle. They (yet) do not have a convention as powerful as checkboxes to indicate their status. This mode error is also made worse by poor visual design and switching labels.

In a recent test of standalone toggles in desktop applications, we observed that about 20% of the approximately 200% of people clicked toggle to on when they meant “off.” We think this is because the toggle switch looks too much like a button: a button that says off makes it click to do it (because that’s what a button does). Then the user cannot recover from the error because the state of the button is now correct for them (now it says’ on ‘because I have turned it off).

Don’t stop switching until you understand how the left/right toggle button works, so it’s best to avoid temporarily switching on desktop applications.”

Case 6: You need to check similar options

The following cases require checkboxes

  • The user needs similar options in the selection list

The checkbox is used to select similar options in the list

These are the situations where you need toggle

  • Users need to switch between different features or operations.

Some operations that are independent of each other and have no intersection need toggle

Case 7: Single and independent option

The following cases require checkboxes

  • Whether this option is selected or not records a yes or no result.
  • When there is only one option, you can select it or not, but the effect of not selecting it is quite different.

Select means use checkbox to indicate yes/no selection

These are the situations where you need toggle

  • There is only one choice, and switches represent different choices.

Toggle is a better way to express the choice of switch

conclusion

Using the right controls in the right circumstances can make the interface more user-friendly. Because the form may have a lot of options to choose from, it can get boring when the user clicks to select these options to complete the information. The examples above will help you make checkbox and Toggle a better choice when adding controls to your form.

Original text: futu. Im/article/che…

English: uxplanet.org/checkbox-vs…

Translator: Diandian