UI Elements
Form controls
Selection controls

Selection controls

Allow the user to select options by checkbox, radio buttons or switches.

Checkbox examples

Inline checkboxes

Checkbox code

A checkbox allows user to make a binary choice, i.e. a choice between one of two possible mutually options.

<div class="form-check abc-checkbox">
    <input class="form-check-input" id="checkbox1" type="checkbox">
    <label class="form-check-label" for="checkbox1">
        Default
    </label>
</div>
                            
Full documentation: https://github.com/flatlogic/awesome-bootstrap-checkbox
Switches examples
Basic example:
Colored:
Small size:
Switches code

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

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

// JavaScript
var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);
                            
Full documentation: https://github.com/abpetkov/switchery
Radio buttons examples

Radios without label text

Inline radios

Radio buttons code

A radio button allows the user to choose only one of a predefined set of options.

<div class="form-check abc-radio">
    <input class="form-check-input" type="radio" name="radio1" id="radio1" value="option1" checked="">
    <label class="form-check-label" for="radio1">
        Small
    </label>
</div>
                            
Full documentation: https://github.com/flatlogic/awesome-bootstrap-checkbox