Advanced Forms

Select Replacement

Basic select

Multi-Value Select

Placeholders

Minimum Input

Multi-select

Basic Multi-select

Basic Multi-select (Only One)

With Preselected Options

Link button

With icon

Select All Option

With Search

Toggle All Button

Tag Autocomplete

Input Tags

Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.

True multi value

Use a <select multiple /> as your input element for a tags input, to gain true multivalue support. Instead of a comma separated string, the values will be set in an array. Existing <option /> elements will automatically be set as tags. This makes it also possible to create tags containing a comma.

Slider Range

Spinners

Default Spinner

Disabled

Horizontal buttons

with max value set to 10

Alternative

with step set to 5

Masked Inputs

Input masks allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phones, etc).

Select Replacement

Multi-select

Tag Autocomplete

Toggle Switches

Slider Range

Spinners

Masked Inputs

Date Picker

Time Pickers

Color Pickers

MaxLength Control

File Upload Drag'n Drop

WYSIWYG Editors

Markdown Editor