Forms

Form components.

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>