Form Plugins

Use Gameforest's custom form plugins for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Checkbox

For even more customization and cross browser consistency, use our completely custom form elements to replace the defaults. Add .custom-checkbox to the .custom-control class.

<label class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" checked>
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Default</span>
</label>

<label class="custom-control custom-checkbox custom-checkbox-primary">
  <input type="checkbox" class="custom-control-input" checked>
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Primary</span>
</label>

<label class="custom-control custom-checkbox custom-checkbox-danger">
  <input type="checkbox" class="custom-control-input" checked>
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Danger</span>
</label>

<label class="custom-control custom-checkbox custom-checkbox-warning">
  <input type="checkbox" class="custom-control-input" checked>
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Warning</span>
</label>

<label class="custom-control custom-checkbox custom-checkbox-success">
  <input type="checkbox" class="custom-control-input" checked>
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Success</span>
</label>

<label class="custom-control custom-checkbox custom-checkbox-info">
  <input type="checkbox" class="custom-control-input" checked>
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Info</span>
</label>

Toggle Checkbox

Add .checkbox-toggle to the custom-checkbox class with custom color and you will get the result like below in the example. Can be useful when you would like to use a lightweight solution for checkboxes.

<div class="checkbox checkbox-toggle checkbox-primary m-r-20">
  <input type="checkbox" id="checkbox-toggle" checked>
  <label for="checkbox-toggle">Enable</label>
</div>

<div class="checkbox checkbox-toggle checkbox-success">
  <input type="checkbox" id="checkbox-toggle-success" checked>
  <label for="checkbox-toggle-success">Yes</label>
</div>

<div class="checkbox checkbox-toggle checkbox-disabled">
  <input type="checkbox" id="checkbox-toggle-disabled" disabled>
  <label for="checkbox-toggle-disabled">Disabled</label>
</div>

<div class="checkbox checkbox-toggle checkbox-danger">
  <input type="checkbox" id="checkbox-toggle-danger" checked>
  <label for="checkbox-toggle-danger"></label>
</div>

<div class="checkbox checkbox-toggle checkbox-warning">
  <input type="checkbox" id="checkbox-toggle-warning" checked>
  <label for="checkbox-toggle-warning"></label>
</div>

<div class="checkbox checkbox-toggle checkbox-info">
  <input type="checkbox" id="checkbox-toggle-info" checked>
  <label for="checkbox-toggle-info"></label>
</div>

Radio

You can use custom radio with the .custom-radio class just add it to the custom-control class with custom color like custom-radio-primary.

<label class="custom-control custom-radio">
  <input id="radio" name="radio" type="radio" class="custom-control-input" checked>
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Default</span>
</label>

<label class="custom-control custom-radio custom-radio-primary">
  <input id="radio" name="radio" type="radio" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Primary</span>
</label>

<label class="custom-control custom-radio custom-radio-danger">
  <input id="radio" name="radio" type="radio" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Danger</span>
</label>

<label class="custom-control custom-radio custom-radio-warning">
  <input id="radio" name="radio" type="radio" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Warning</span>
</label>

<label class="custom-control custom-radio custom-radio-success">
  <input id="radio" name="radio" type="radio" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Success</span>
</label>

<label class="custom-control custom-radio custom-radio-info">
  <input id="radio" name="radio" type="radio" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Info</span>
</label>

Switchery

Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps.

<input type="checkbox" class="js-switch">
<input type="checkbox" class="js-switch" checked>
<input type="checkbox" class="js-switch">

<script type="text/javascript">
(function($) {
  "use strict";
    // switcher
    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));

    elems.forEach(function(html) {
      var switchery = new Switchery(html);
    });
})(jQuery);
</script>
version: 4.1.2