Form

Horizontal

Text

Select

Option 01 Option 02

Datalist

Textarea

Radio

Option 01
Option 02

A B C D

Checkbox

Option 01
Option 02

A B C D

Multiple

Option 01 Option 02 Option 03 Option 04

Range

Sizes

Option 01 Option 02 Button Checkbox

Option 01 Option 02 Button Checkbox

Option 01 Option 02 Button Checkbox

Widths

form-width-large

form-width-medium form-width-small form-width-xsmall

Icon

Not clickable

Clickable

Select

Option 01 Option 02

Option 01 Option 02

Option 01 Option 02 Option 03 Option 04

Radio, Checkbox and Select

Radio Checked
Unchecked
Unchecked
Disabled
Disabled Checked

A B C D

Checkbox Checked
Unchecked
Unchecked
Disabled
Disabled Checked

A B C D

Checkbox Indeterminate
Unchecked
Unchecked
Disabled
Disabled Indeterminate

A B C D

Custom Controls

File

Select

Here is a text

upload

Submit

Select

Option 01 Option 02 Option 03 Option 04

Option 01 Option 02 Option 03 Option 04

Please select... Option 01 Option 02 Option 03 Option 04

Please select... Option 01 Option 02 Option 03 Option 04

Note The hover and focus state for gls-form-custom are not styled by default, but you could use the adjacent sibling selector to do so.