Input Elements

General input elements

Autocomplete

Password

Validation Rules:

wordNotEmail: true,
wordMinLength: true,
wordMaxLength: false,
wordInvalidChar: true,
wordSimilarToUsername: true,
wordSequences: true,
wordTwoCharacterClasses: false,
wordRepetitions: false,
wordLowercase: true,
wordUppercase: true,
wordOneNumber: true,
wordThreeNumbers: true,
wordOneSpecialChar: true,
wordTwoSpecialChar: true,
wordUpperLowerCombo: true,
wordLetterNumberCombo: true,
wordLetterNumberCharCombo: true

Masked Input

(999) 999-9999
(999) 999-9999? x99999
99-9999999
999-99-9999
a*-999-a999

Basic Inputs

Example block-level help text here.

email@example.com

Input Sizing






Switches

Pure CSS Switches

Using ON/OFF label text

Using YES/NO label text

Radio button behaviour


Switches by Switchery

Default size



Small size



Disabled



Checking state (On Click)

  

Checking state (On Change)

  

Colors

data-color="orange"

data-color="purple"

data-color="yellow"

data-color="red"

data-color="blue"

data-color="#20B2AA"

Styled Checkboxes and Radios







Input Groups





$ .00

@

.00

$ .00











Validation States

Plain

(success)
(warning)
(error)
@
(success)

On Horizontal Form

(success)
@
(success)

On Inline Form

(success)

@
(success)

Optional icons with hidden .sr-only labels

(success)
@
(success)