Toggle Button

Toggle is a control that is used to quickly switch between two possible states. Toggles are only used for these binary actions that occur immediately after the user “flips” the toggle switch.

When to use

Used to confirm an only additional option with or without cost. For example, if you required disposable cutlery, or napkins. Use when you have until two (2) options of this type.

When don't use

If we have multiple options in a set to allow users to make one or more selections, use checkbox instead toggle buttons.

Main elements

Group labels

  • A heading must accompany a set of toggle buttons (max 2) to provide further context or clarity.
  • Must indicate the category of the grouping or describe what actions to take below, the number of options required and if the selection is mandatory.

Checkbox labels

  • Always use clear and concise labels.
  • Regarding additional options, be explicit about the additional cost and results in the total price that will follow if the checkbox is selected.
  • Labels appear to the left of checkbox inputs to facilitate the selection in the right side.

Overflow content

  • Toggle button labels being fewer than three words.
  • If you are tight on space, consider rewording the label. Do not truncate checkbox label text with an ellipsis.
  • Long labels may wrap to a second line, and this is preferable to truncation.
  • Text should wrap below so the control and label are vertical centered.

Behaviors

States

The toggle button input allows two states: on & off.


Did this page help you?