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.
If we have multiple options in a set to allow users to make one or more selections, use checkbox instead toggle buttons.
- 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.
- 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.
- 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.
The toggle button input allows two states: on & off.
Updated over 1 year ago