Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 1 | page.title=Switches |
Scott Main | 64d5103 | 2013-04-12 14:00:30 -0700 | [diff] [blame] | 2 | page.tags="switch","checkbox","radiobutton","button" |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 3 | @jd:body |
| 4 | |
| 5 | <p>Switches allow the user to select options. There are three kinds of switches: checkboxes, radio |
| 6 | buttons, and on/off switches.</p> |
Scott Main | cbcd17d | 2013-05-14 08:46:55 -0700 | [diff] [blame] | 7 | |
| 8 | |
| 9 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 10 | <h2 id="checkboxes">Checkboxes</h2> |
| 11 | |
Scott Main | cbcd17d | 2013-05-14 08:46:55 -0700 | [diff] [blame] | 12 | <a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/checkbox.html"> |
| 13 | <div> |
| 14 | <h3>Developer Docs</h3> |
| 15 | <p>Checkboxes</p> |
| 16 | </div> |
| 17 | </a> |
| 18 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 19 | <p>Checkboxes allow the user to select multiple options from a set. Avoid using a single checkbox to |
| 20 | turn an option off or on. Instead, use an on/off switch.</p> |
| 21 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 22 | <img src="{@docRoot}design/media/switches_checkboxes.png"> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 23 | |
Scott Main | cbcd17d | 2013-05-14 08:46:55 -0700 | [diff] [blame] | 24 | |
| 25 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 26 | <h2 id="radio-buttons">Radio Buttons</h2> |
| 27 | |
Scott Main | cbcd17d | 2013-05-14 08:46:55 -0700 | [diff] [blame] | 28 | <a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/radiobutton.html"> |
| 29 | <div> |
| 30 | <h3>Developer Docs</h3> |
| 31 | <p>Radio Buttons</p> |
| 32 | </div> |
| 33 | </a> |
| 34 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 35 | <p>Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive |
| 36 | selection if you think that the user needs to see all available options side-by-side. Otherwise, |
| 37 | consider a spinner, which uses less space.</p> |
| 38 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 39 | <img src="{@docRoot}design/media/switches_radios.png"> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 40 | |
Scott Main | cbcd17d | 2013-05-14 08:46:55 -0700 | [diff] [blame] | 41 | |
| 42 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 43 | <h2 id="switches">On/off Switches</h2> |
| 44 | |
Scott Main | cbcd17d | 2013-05-14 08:46:55 -0700 | [diff] [blame] | 45 | <a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/togglebutton.html"> |
| 46 | <div> |
| 47 | <h3>Developer Docs</h3> |
| 48 | <p>Toggle Buttons</p> |
| 49 | </div> |
| 50 | </a> |
| 51 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 52 | <p>On/off switches toggle the state of a single settings option.</p> |
| 53 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 54 | <img src="{@docRoot}design/media/switches_switches.png"> |
Scott Main | d4cc942 | 2012-10-03 18:47:08 -0700 | [diff] [blame] | 55 | |
Scott Main | cbcd17d | 2013-05-14 08:46:55 -0700 | [diff] [blame] | 56 | |