components

Checkbox

Checkboxes allow users to select one or more options from a visible list.

Primary Checkbox

 
  • <div class="primary_checkbox">
<form class="lp__checkbox ">
    <input class=" lp__primary_checkbox" type="checkbox" value="Selected" name="Selected" />
     <label for="Selected">Checkbox</label>
</form>
</div>
  • Checkboxes allow users to select one or more options from a visible list. Checkboxes can be grouped in either a vertical or horizontal configuration, or in a grid of columns and rows in instances with a very large number of options.
  • EXAMPLE
Primary CheckBox Group
Checkbox Button 

  • 
<fieldset class="primary_checkbox">
<legend class="lp__sr_only">Checkbox Button</legend>
<form action="">
<div class="lp__checkbox">
    <input class=" lp__primary_checkbox" type="checkbox" value="Disabled-1" name="checkbox" disabled="disabled"/>
     <label for="Disabled-1">Disabled Checkbox</label>
</div>
<div class="lp__checkbox">
    <input class=" lp__primary_checkbox" type="checkbox" name="checkbox" value="Unselected-1" />
     <label for="Unselected-1">Unselected Checkbox</label>
</div>
<div class="lp__checkbox">
    <input class=" lp__primary_checkbox" type="checkbox" name="checkbox" value="Selected-1" checked="checked"/>
     <label for="Selected-1">Selected Checkbox</label>
</div>
<div class="lp__checkbox">
    <input class=" lp__primary_checkbox" type="checkbox" name="checkbox" value="disabled-Selected-1" disabled="disabled" checked="checked"/>
     <label for="disabled-Selected-1">Disabled Selected Checkbox</label>
</div>
</form>
</fieldset>
  • DESIGNER
  • EXAMPLE
Primary CheckBox Inline Group
Checkbox Button 

  • <fieldset class="primary_checkbox">
<legend class="lp__sr_only">Checkbox Button</legend>
<form action="">
<div class="lp__checkbox_inline">
    <input class=" lp__primary_checkbox" type="checkbox" value="Disabled" disabled="disabled"/>
     <label for="Disabled">Disabled Checkbox</label>
</div>
<div class="lp__checkbox_inline">
    <input class=" lp__primary_checkbox" type="checkbox" value="Unselected" />
     <label for="Unselected">Unselected Checkbox</label>
</div>
<div class="lp__checkbox_inline">
    <input class=" lp__primary_checkbox" type="checkbox" value="Selected" checked="checked"/>
     <label for="Selected">Selected Checkbox</label>
</div>
<div class="lp__checkbox_inline">
    <input class=" lp__primary_checkbox" type="checkbox" value="disabled-Selected" disabled="disabled" checked="checked"/>
     <label for="disabled-Selected">Disabled Selected Checkbox</label>
</div>
</form>
</fieldset>
  • DESIGNER
  • EXAMPLE
Primary Inverse Checkbox

Using various options for customizing in background color add .primary_inverse_checkbox class.

Checkbox Button

Checkbox Button