#### Forms - Checkboxes & Radios

Statistics Invoices Schedule

##### Checkboxes

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

Left stacked default
Checked default
Unchecked default
Disabled default
Left inline default Checked default Unchecked default
Left stacked styled
Checked styled
Unchecked styled
Disabled styled
Lef inline styled Checked styled Unchecked styled
Right stacked default
Checked default
Unchecked default
Disabled default
Right inline default Checked default Unchecked default
Right stacked styled
Checked styled
Unchecked styled
Disabled styled
Right inline styled Checked styled Unchecked styled

##### 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 `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.

Left stacked default
Selected default
Unselected default
Disabled default
Left inline default Selected default Unselected default
Left stacked styled
Selected styled
Unselected styled
Disabled styled
Left inline styled Selected styled Unselected styled
Right stacked default
Selected default
Unselected default
Disabled default
Right inline default Selected default Unselected default
Right stacked styled
Selected styled
Unselected styled
Disabled styled
Right inline styled Selected styled Unselected styled

##### 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 `background` and `text` color classes to Uniform's `wrapperClass` options.

Checkboxes
Primary checkbox
Danger checkbox
Success checkbox
Warning checkbox
Info checkbox
Custom color
Radio buttons
Primary radio
Danger radio
Success radio
Warning radio
Info radio
Custom color

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

Checked switch
Unchecked switch
Checked disabled
Unchecked disabled

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

Switch in primary context
Switch in danger context
Switch in info context
Switch in warning context

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

Large size
Default size
Small size
Mini size

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

Option 1 Option 2
Option 1 Option 2
Option 1 Option 2
Option 1 Option 2

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

Checked switch
Unchecked switch
Checked disabled
Unchecked disabled

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

Checked switch
Unchecked switch
Checked disabled
Unchecked disabled

##### Bootstrap switch

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

Checked switch
Checked disabled
Checked readonly
Unchecked switch
Unchecked disabled
Unchecked readonly

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

Default color
Primary color
Danger color
Success color
Warning color
Info color

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

Large switch
Small switch
Default switch
Mini switch

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

Default text
Icons only
Enable/Disable
Online/Offline