Toggle Group

Ready

Toggle buttons can be used to put together related options that share a common attribute modification. It allows the user to switch from one selected option to another in the same control, having one option selected at a time. Also, there can be another variation that allows selecting multiple options from the current toggle group.

Usage

Toggles should be used in place of radio buttons whenever the options are:

  • Minimal in number, i.e. 3 or 4 maximum choices where only one selection is required.
  • Opposites of each other.

Variants

The selection of the toggle group can be mutually exclusive (single variant) or mutually inclusive (multiple variant).

Icon usage

Inside the toggle button, it is possible to use icons to represent recognizable actions. The specifications for icon usage differs a little bit in relation to text usage. The size of the icons should be 24 by 24 pixels, it must be centered respecting to the box that contains it vertically and horizontally.