Checkbox

For using our customized checkbox, you need to use .custom-form-input class for input, .gra-custom-form-label class for label, .gra-custom-form-control and .gra-checkbox classes for the wrapper.

Checkbox

Checkbox Disabled

<div class="gra-custom-form-control gra-checkbox">
  <input class="gra-custom-form-input" id="custom-checkbox" type="checkbox" />
  <label class="gra-custom-form-label" for="custom-checkbox">Checkbox</label>
</div>
<div class="gra-custom-form-control gra-checkbox">
  <input class="gra-custom-form-input" id="custom-checkbox-2" type="checkbox" disabled checked/>
  <label class="gra-custom-form-label" for="custom-checkbox-2">Checkbox Disabled</label>
</div>

Colors

Checkbox Blue

Checkbox Green

Checkbox Yellow

Checkbox Red

<div class="gra-custom-form-control gra-checkbox blue">
  <input class="gra-custom-form-input" id="custom-checkbox-blue" type="checkbox"/>
  <label class="gra-custom-form-label" for="custom-checkbox-blue">Checkbox Blue</label>
</div>
<div class="gra-custom-form-control gra-checkbox green">
  <input class="gra-custom-form-input" id="custom-checkbox-green" type="checkbox"/>
  <label class="gra-custom-form-label" for="custom-checkbox-green">Checkbox Green</label>
</div>
<div class="gra-custom-form-control gra-checkbox yellow">
  <input class="gra-custom-form-input" id="custom-checkbox-yellow" type="checkbox"/>
  <label class="gra-custom-form-label" for="custom-checkbox-yellow">Checkbox Yellow</label>
</div>
<div class="gra-custom-form-control gra-checkbox red">
  <input class="gra-custom-form-input" id="custom-checkbox-red" type="checkbox"/>
  <label class="gra-custom-form-label" for="custom-checkbox-red">Checkbox Red</label>
</div>