Home | History | Annotate | Download | only in building-blocks
      1 page.title=Switches
      2 page.tags="switch","checkbox","radiobutton","button"
      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>
      7 
      8 
      9 
     10 <h2 id="checkboxes">Checkboxes</h2>
     11 
     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 
     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 
     22   <img src="{@docRoot}design/media/switches_checkboxes.png">
     23 
     24 
     25 
     26 <h2 id="radio-buttons">Radio Buttons</h2>
     27 
     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 
     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 
     39   <img src="{@docRoot}design/media/switches_radios.png">
     40 
     41 
     42 
     43 <h2 id="switches">On/off Switches</h2>
     44 
     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 
     52 <p>On/off switches toggle the state of a single settings option.</p>
     53 
     54   <img src="{@docRoot}design/media/switches_switches.png">
     55 
     56 
     57