Checkboxes

The HTML input element <input type=checkbox>is an input element to enter an array of different values. The valueattribute is used to define the value submitted by the checkbox. The checkedattribute is used to indicate whether this item is selected. The indeterminateattribute is used to indicate that the checkbox is in an indeterminate state (on most platforms, this draws a horizontal line across the checkbox).

Radio buttons

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 radiogroupmay 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 labelattribute may be added beside the radio button.

Custom Bootstrap inputs

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control. Custom checkboxes can also utilize the :indeterminatepseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

Color options

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 backgroundand textcolor classes to Uniform's wrapperClassoptions.

Switchery toggles
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.

Left inline

Switchery component also supports default option for leftand rightinline alignment. Just add .form-check-inlineclass to .form-check-switcherycontainer. Default alignment is left.

Sticked to the right

Sometimes it's very useful to have switches on the right side of the container. Just add .form-check-rightclass to the <.form-check>container for the very right side switcher alignment.

Multiple labels

Switchery can be used with single label or with multiple labels. To use, add .switchery-doubleclass to the container. All sizing options are available for this switchery type as well.

Right inline

You can also reverse inline alignment to right- just add default .form-check-rightto any .form-checkcontainer and all inputs will be adjusted automatically.

Bootstrap switch
Switch states

By default Bootstrap Switch supports standard attributes for checkboxes such as disabled, checkedand readonlyor use trueor falsein 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-colorand data-off-colorattributes.

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-sizeattribute.

Label options

Labels support any text or icon via data-on-textand data-off-textattributes. If no custom text specified, switch will display default on/off text.