Selection controls usage

You can choose a couple of selection controls. The selection controls you can choose from are listed below

Checkbox

Checkboxes are used when a user has multiple options. If there is only 1 option a switch is recommended. Checkboxes can be used on their own so there is no need to add a label. To use the material checkboxes all you need to do is add the class .checkbox.

		
<input type="checkbox" class="checkbox" id="test"></label><label for="test">Test</label>
<input type="checkbox" class="checkbox" id="test1" checked></label><label for="test1">Test1</label>
<input type="checkbox" class="checkbox" id="test2" disabled></label><label for="test2">Test2</label>
<input type="checkbox" class="checkbox" id="test3" disabled checked></label><label for="test3">Test3</label>
		
	

Radio buttons

You can use the radio buttons without the use of an additional class. However to support other browsers you need to add an additional class .radio.

		
<input type="radio" id="test4" name="radio" class="radio"><label for="test4">Test4</label>
<input type="radio" id="test5" name="radio" class="radio" checked><label for="test5">Test5</label>
<input type="radio" id="example2" name="radio" class="radio" disabled><label for="example2">Example2</label>
<input type="radio" id="example4" name="radio" class="radio" disabled checked><label for="example4">Example4
		
	

Switch

The switch is usually used when there is only a need for 1 checkbox.

		
<div class="switch">
  <label>
    off
    <input type="checkbox">
    <span class="lever"></span>
    on
  </label>
</div>

<div class="switch">
  <label>
    off
    <input type="checkbox" disabled>
    <span class="lever"></span>
    on
  </label>
</div>
		
	

Resources