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

Left stacked stretched

Right stacked

Right stacked stretched

Left inline

Right inline

Custom CSS checkboxes

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 :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

Left stacked checkboxes

Left stacked stretched checkboxes

Right stacked checkboxes

Right stacked stretched checkboxes

Left inline checkboxes

Right inline checkboxes

Contextual colors

Inversed checkbox

Custom CSS switches

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute, but unlike custom checkboxes don't support indeterminate state. Available in 2 shapes and support 6 alternative colors.

Left stacked switches

Left stacked stretched switches

Right stacked switches

Right stacked stretched switches

Left inline switches

Right inline switches

Color options

Square shape

Radios

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

Left stacked stretched

Right stacked

Right stacked stretched

Left inline

Right inline

Custom CSS radios

Custom radios use the same approach as checkboxes, they share the same set of colors and styles. Both can be easily customized in _variables-core.scss file simply by changing shared variable values. Here are the examples of label alignment, single radio with no text label is also supported.

Left stacked radios

Left stacked stretched radios

Right stacked radios

Right stacked stretched radios

Left inline radios

Right inline radios

Contextual colors

Inversed radio

Radio switches

You can also use normal radio buttons as switches, all default colors and shapes are supported as well. Use same class names, but different input type and other attributes like name, id and value. None of these examples requires JS, all inputs are designed with pure CSS.

Left stacked switches

Left stacked stretched switches

Right stacked switches

Right stacked stretched switches

Left inline switches

Right inline switches