Forms - Checkboxes & Radios
The HTML input element <input type=checkbox> is an input element to enter an array of different values. The value attribute is used to define the value submitted by the checkbox. The checked attribute is used to indicate whether this item is selected. The indeterminate attribute is used to indicate that the checkbox is in an indeterminate state (on most platforms, this draws a horizontal line across the checkbox).
Radio button is an element that can be turned on and off. Radio buttons are almost always grouped together in groups. Only one radio button within the same radiogroup may be selected at a time. The user can switch which radio button is turned on by selecting it with the mouse or keyboard. Other radio buttons in the same group are turned off. A label, specified with the label attribute may be added beside the radio button.
Besides default color, both checkboxes and radio buttons support 5 additional contextual color classes and other custom colors from color system. Colors are adapted to use in different background colors of parent elements - dropdown menus, active list states, input group addons - all checkboxes and radios are white on dark backgrounds. To use, simply add background and text color classes to Uniform's wrapperClass options.
Default switchers
You can add as many switches as you like, as long as their corresponding checkboxes have the same class. Select them and make new instance of the Switchery class for every of them.
Switcher colors
You can change the default color of the switch to fit your design perfectly. According to the color system, any of its color can be applied to the switchery. Custom colors are also supported.
Single label
You can choose one of 4 main Switch sizes - large (29px height), default (25px height), small (21px height) and mini (17px height). Just add proper class to the .checkbox wrapper.
Multiple labels
Switchery can be used with single label or with multiple labels. To use, add .switchery-double class to the container. All sizing options are available for this switchery type as well.
Right alignment
Default switchery position is left. Use .checkbox-right class to change switchery position to right. This class sets correct side padding for label and changes main position.
Sticked to the right
Sometimes it's very useful to have switches on the right side of the container. Just add .display-block class to the <label> for the very right side switcher alignment.
Switch states
By default Bootstrap Switch supports standard attributes for checkboxes such as disabled, checked and readonly or use true or false in plugin options.
Switch colors
You can change the default color of the switch by choosing one of 6 predefined classes and use them in data-on-color and data-off-color attributes.
Switch sizes
Default height is equal to input field height, but you can also choose one of 4 available sizes (large, small and mini) by changing data-size attribute.
Label options
Labels support any text or icon via data-on-text and data-off-text attributes. If no custom text specified, switch will display default on/off text.