Checkboxes
Native 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
Colors
Inversed checkbox
Checkbox switches
A switch has the markup of a custom checkbox but uses the
.form-switch class to render a toggle switch.
Switches also support the disabled attribute,
but unlike custom checkboxes don't support
indeterminate state. Supports 6 alternative
colors and is ready for dark backgrounds.
Left stacked switches
Left stacked stretched switches
Right stacked switches
Right stacked stretched switches
Left inline switches
Right inline switches
Color options
Inversed colors
Radios
Native, custom and switches. Left and right alignmentNative 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
Color options
Inversed colors
