Components - Selection controls(Checkbox, Radio, Switch)

출처 : http://www.google.com/design/spec/components/selection-controls.html

     Checkbox

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

If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.

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

Light theme

Dark theme

Light

On: Swatch 500, Opacity  100%
Off: #000000, Opacity  54%
Disabled: #000000, Opacity  26%

Light theme for checkboxes in hover, focused, pressed, disabled, and disabled focused states.

Dark

On: Swatch 500, Opacity  100%
Off: #FFFFFF, Opacity  70%
Disabled: #FFFFFF, Opacity  30%

Dark theme for checkboxes in hover, focused, pressed, disabled, and disabled focused states.

Radio button

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 dropdown, which uses less space than displaying all options.

Light theme for radio buttons

Dark theme for radio buttons

Light

On: Swatch 500, Opacity 100%
Off: #000000, Opacity  54%
Disabled: #000000, Opacity  26%

Light theme for radio buttons in hover, focused, pressed, disabled, and disabled focused states.

Dark

On: Swatch 500, Opacity  100%
Off: #FFFFFF, Opacity  70%
Disabled: #FFFFFF, Opacity  30%

Dark theme for radio buttons in hover, focused, pressed, disabled, and disabled focused states.

Switch

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 take on the same visual properties of the radio button.

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

Light theme

Dark theme

Light

Thumb On: Swatch 500, Opacity  100%
Track On: Swatch 500, Opacity  50%

Thumb Off: Grey 50, #FAFAFA, Opacity  100%
Track Off: #000000, Opacity  26%

Thumb Disabled: Grey 400, #BDBDBD, Opacity  100%
Track Disabled: #000000, Opacity  12%

Light theme for switches in hover, focused, pressed, disabled, and disabled focused states.

Dark

Thumb On: Swatch 200, Opacity  100%
Track On: Swatch 200, Opacity  50%

Thumb Off: Grey 400, #BDBDBD, Opacity  100%
Track Off: #FFFFFF, Opacity  30%

Thumb Disabled: Grey 800, #424242, Opacity 100%

Track Disabled: #FFFFFF, Opacity  10%

Dark theme for switches in hover, focused, pressed, disabled, and disabled focused states.

Use the outer radial reaction 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.

Radial reaction on mobile

No radial reaction on desktop