Forms
Text Input
Default
Submitted data
Pre-filled
Submitted data
Disabled
Submitted data
Read Only
Submitted data
Custom colors
Submitted data
Error state class
Submitted data
Icon left
Submitted data
Icon right
Submitted data
<div id="graph1"></div>
Email Input
Default
Submitted data
Pre-filled
Submitted data
Disabled
Submitted data
Read Only
Submitted data
Custom colors
Submitted data
Error state class
Submitted data
Icon Left
Submitted data
Icon Right
Submitted data
<div id="graph1"></div>
Password Input
Default
Submitted data
Pre-filled
Submitted data
Disabled
Submitted data
Read Only
Submitted data
Custom colors
Submitted data
Error state class
Submitted data
Show Password
Submitted data
<div id="graph1"></div>
Textarea
Default
Submitted data
Pre-filled
Submitted data
Disabled
Submitted data
Read Only
Submitted data
Custom colors
Submitted data
Error state class
Submitted data
Auto expand
Submitted data
<div id="graph1"></div>
Select
Single Select
Default
Submitted data
Default with optgroup
Submitted data
Pre-filled
Submitted data
Pre-filled with optgroups
Submitted data
Disabled
Submitted data
Custom colors
Submitted data
Error state class
Submitted data
Icon Left
Submitted data
Icon Right
Submitted data
With Search
Submitted data
Multiselect
Default
Submitted data
Default with Optgroups
Submitted data
Pre-filled
Submitted data
Pre-filled with optgroups
Submitted data
Disabled
Submitted data
Custom Colors
Submitted data
Error state class
Submitted data
Icon Left
Submitted data
Icon Right
Submitted data
With Search
Submitted data
Multiselect Classic
Default
Submitted data
Default with optgroups
Submitted data
Pre-filled
Submitted data
Pre-filled with optgroups
Submitted data
Disabled
Submitted data
Custom Colors
Submitted data
Error state class
Submitted data
With Search
Submitted data
<div id="graph1"></div>
Date
Default
Submitted data
Pre-filled
Submitted data
Disabled
Submitted data
Read Only
Submitted data
Custom Colors
Submitted data
Error class
Submitted data
Min and Max
Submitted data
Min in future
Submitted data
Max in past
Submitted data
Time
Default
Submitted data
Pre-filled
Submitted data
Default
Submitted data
Pre-filled
Submitted data
Date & Time
Default
Pre-filled
Month
Default
Pre-filled
Week
Default
Pre-filled
<div id="graph1"></div>
Range
Single range
Default
Submitted data
Default with value
Submitted data
Default Disabled
Submitted data
Default Disabled with value
Submitted data
Default custom colors
Submitted data
Default custom colors with value
Submitted data
Handle Scale
Submitted data
Handle Scale with value
Submitted data
Handle Scale disabled
Submitted data
Handle Scale disabled with value
Submitted data
Handle Scale custom colors
Submitted data
Handle Scale custom colors with value
Submitted data
Handle Shadow
Submitted data
Handle Shadow with value
Submitted data
Disabled Handle Shadow
Submitted data
Disabled Handle Shadow with value
Submitted data
Handle Shadow custom colors
Submitted data
Handle Shadow custom colors with value
Submitted data
With custom values Array
Submitted data
With external value label
Submitted data
Dual range
Default
Submitted data
Default with values
Submitted data
Default disabled
Submitted data
Default disabled with values
Submitted data
Default colors
Submitted data
Default colors with values
Submitted data
<div id="graph1"></div>
Radio
Default
Submitted data
Disabled
Submitted data
Error Class
Submitted data
Invalid
Submitted data
Color
Submitted data
Wave
Submitted data
Color Wave
Submitted data
Inline
Submitted data
<div id="graph1"></div>
Checkbox
Classic checkbox
Default
Submitted data
Disabled
Submitted data
Error Class
Submitted data
Invalid
Submitted data
Color
Submitted data
Wave
Submitted data
Color Wave
Submitted data
Inline
Submitted data
Rotating checkbox
Default
Submitted data
Disabled
Submitted data
Error Class
Submitted data
Invalid
Submitted data
Color
Submitted data
Wave
Submitted data
Color Wave
Submitted data
Inline
Submitted data
<div id="graph1"></div>
Switch
All switches support cusom color via data attributes where you can pass multiple classes e.g. data-checked="green-bg lighter-4 green-bg-a" data-unchecked="red-bg lighter-4 red-bg-a"
Simple
.bmd-switch .simple-switch
Default
Submitted data
Checked
Submitted data
Disabled
Submitted data
Disabled & Checked
Submitted data
Colors
Submitted data
Colors Checked
Submitted data
Material design
.bmd-switch .material-switch
Default
Submitted data
Checked
Submitted data
Disabled
Submitted data
Disabled & checked
Submitted data
Colors
Submitted data
Colors Checked
Submitted data
Material design small
.bmd-switch .material-sm-switch
Default
Submitted data
Checked
Submitted data
Disabled
Submitted data
Disabled & Checked
Submitted data
Colors
Submitted data
Colors Checked
Submitted data
Border
.bmd-switch .border-switch
Default
Submitted data
Checked
Submitted data
Disabled
Submitted data
Disabled & Checked
Submitted data
Colors
Submitted data
Colors Checked
Submitted data
Inset
.bmd-switch .inset-switch
Default
Submitted data
Checked
Submitted data
Disabled
Submitted data
Disabled & Checked
Submitted data
Colors
Submitted data
Colors Checked
Submitted data
Box
.bmd-switch .box-switch
Default
Submitted data
Checked
Submitted data
Disabled
Submitted data
Disabled & Checked
Submitted data
Colors
Submitted data
Colors Checked
Submitted data
Flex
.bmd-switch .flex-switch
Default
Submitted data
Checked
Submitted data
Disabled
Submitted data
Disabled & Checked
Submitted data
Colors
Submitted data
Colors Checked
Submitted data
Full Flex
.bmd-switch .full-flex-switch
Default
Submitted data
Checked
Submitted data
Disabled
Submitted data
Disabled & Checked
Submitted data
Colors
Submitted data
Colors Checked
Submitted data
Bubble
.bmd-switch .bubble-switch
Default
Submitted data
Checked
Submitted data
Disabled
Submitted data
Disabled & Checked
Submitted data
Colors
Submitted data
Colors Checked
Submitted data
Teleport
.bmd-switch .teleport-switch
Default
Submitted data
Checked
Submitted data
Disabled
Submitted data
Disabled & Checked
Submitted data
Colors
Submitted data
Colors Checked
Submitted data
UnderLine
.bmd-switch .underline-switch
Default
Submitted data
Checked
Submitted data
Disabled
Submitted data
Disabled & Checked
Submitted data
Colors
Submitted data
Colors Checked
Submitted data
<div id="graph1"></div>