Form elements

Inputs color BLACKWHITE

Inputs

Text inputs

Radios and checkboxes

Checkables in buttons

Radios

Checkboxes

Switches

ONOFF Reversed style

The template includes a complete set of switches sizes, all focusable and controlable by keyboard:

ONOFF

YESNO

TRUEFALSE

ENABLEDDISABLED

ONOFF

TRUEFALSE

ENABLEDDISABLED

ONOFF

ONOFF

Disabled ONOFF Enabled As any input, they may be disabled:

ONOFF ONOFF ONOFF ONOFF

Pseudo-inputs

This style mimics text inputs, so mixed elements can be included:

Check

USA

This is an information bubble to help the user.

Special inputs

Select files

Form validation

Regular inputs

Special inputs

Please select

Selects

Custom skin select:

Selected value Open on hover

These custom select come with advanced features:

  • Two opening modes: click and hover
  • Preserve original select width if set
  • Screen position auto-detect: the list open on top if there is not enough space below the select - even while scrolling!
  • Support for multiple selects, with easy-selection mode (enabled automatically on touch devices)
  • Display as drop-down or as list
  • Keyboard focus, scroll and select
  • Keyboard search: type one or more letters to jump to the first matching entry
  • Configuration options are set with classes and inline data attribute - no javascript needed
  • On touch screens, fallback to OS interface when selecting

Selects examples

Expandable list
For long values

Expand

Disabled
By class or input

Disabled

Check list
Touch friendly

Check list

Multiple selection
(hold Ctrl/Cmd)

Multiple

Multiple + check
Easy selection

Multiple

Multiple + allow empty
Easy selection

Multiple

Single as list
(no multiple selection)
First valueSecond valueMultipleDisabled value
Multiple as list
(hold Ctrl/Cmd)
First valueSecond valueMultipleDisabled value
Multiple + check
Easy selection
First valueSecond valueMultipleDisabled value
In a tooltip
Context menu