Summary of features

Shown below are form elements requiring no plug-ins beyond Bootstrap and a modern browser. The default examples use standard Bootstrap mark-up (styled checkbox/radios require a <span> alongside their label text). The 'styled' examples have '.form-styled' added to their parent <form>. The coloured examples have '.panel-brand1' added to their containing .panel, which works with any COLOURcode colour class.

At a glance

  • Change all of a form's inputs with a single style class.
  • Colour all components of a form with a single colour class.
  • Choose from up to ten named and two branding colour-sets.
  • All colour-sets based on single SASS-variable base colours.

Input types ( default form )

Help text like this can be added to any input element
This text cannot be edited.

Checkboxes

Radios

Inline checkboxes and radios

Introductory text or question

Styled checkboxes .checkbox.checkbox-styled

Styled radios .radio.radio-styled

Styled inline checkboxes and radios

Introductory text or question

See the template's Form Components section for more checkbox and radio opions.

Control sizes ( default form )

Input sizes:

Select sizes:

Input group sizes:

Input groups ( default form )

.00
@example.com
http://example.com/
Stop
Ready
Go!
text
text
text

HTML5 input masks ( default form )

See the template's Form Components section for many more date-picker opions.

50

See the template's Form Components section for many more range slider opions.

#92d78b

See the template's Form Components section for many more colour-picker opions.

Input types ( styled form )

Help text like this can be added to any input element
This text cannot be edited.

Checkboxes

Radios

Inline checkboxes and radios

Introductory text or question

Styled checkboxes .checkbox.checkbox-styled

Styled radios .radio.radio-styled

Styled inline checkboxes and radios

Introductory text or question

See the template's Form Components section for more checkbox and radio opions.

Control sizes ( styled form )

Input sizes:

Select sizes:

Input group sizes:

Input groups ( styled form )

.00
@example.com
http://example.com/
Stop
Ready
Go!
text
text
text

HTML5 input masks ( styled form )

See the template's Form Components section for many more date-picker opions.

50

See the template's Form Components section for many more range slider opions.

#92d78b

See the template's Form Components section for many more colour-picker opions.

Input types ( styled form in coloured panel )

Help text like this can be added to any input element
This text cannot be edited.

Checkboxes

Radios

Inline checkboxes and radios

Introductory text or question

Styled checkboxes .checkbox.checkbox-styled

Styled radios .radio.radio-styled

Styled inline checkboxes and radios

Introductory text or question

See the template's Form Components section for more checkbox and radio opions.

Control sizes ( styled form in coloured panel )

Input sizes:

Select sizes:

Input group sizes:

Input groups ( styled form in coloured panel )

.00
@example.com
http://example.com/
Stop
Ready
Go!
text
text
text

HTML5 input masks ( styled form in coloured panel )

See the template's Form Components section for many more date-picker opions.

50

See the template's Form Components section for many more range slider opions.

#92d78b

See the template's Form Components section for many more colour-picker opions.