Please note that the contents of this offline web site may be out of date. To access the most recent documentation visit the online version .
Note that links that point to online resources are green in color and will open in a new window.
We would love it if you could give us feedback about this material by filling this form (You have to be online to fill it)
Components Switches
This document is a preview.

Google ©

Privacy & Terms

Switches

Switches allow the user to select options. There are three kinds of switches: checkboxes, radio buttons, and on/off switches.

Note: The graphic rings illustrated in the following examples represent animation and do not represent what buttons should look like in implementation.

Checkbox Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Checkboxes allow the user to select multiple options from a set.

If you have multiple on/off options appearing in a list, checkboxes are a good way to preserve space.

If you have a single on/off option, avoid using a checkbox and use an on/off switch instead.

By actively transforming from a box into a checkmark, the action of checking something off feels more fulfilling and directly manipulated.

Checkboxes use animation to communicate focused and pressed states.

Radio Button Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

Otherwise, consider a pulldown, which uses less space than displaying all options.

Radio buttons use animation to communicate focused and pressed states.

Switch Expand and collapse content An arrow that points down when collapsed and points up when expanded.

On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches will take on the same visual properties of the radio button.

Switches use animation to communicate focus and pressed states.

The on/off slide toggle with the words “on” and “off” baked within the asset is deprecated. Use the switch shown here instead.

Use the outer radial expansion only on form factors that favor finger touch, where interaction may obstruct the element completely. For desktop usage with a mouse, you do not need this extra indication.