Components Forms Form Elements

Form Elements

A basic form control input and textarea with disabled and readonly mode.


A form control with success, warning and error state.


A custom styled checkboxes and radios.


A custom styled file browser.


A custom made toggles with jquery support.

Class Reference Values
class="az-toggle az-toggle-[value]" secondary | success | dark

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.

@
@example.com
$
.00

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).

Date:
Phone:
Phone + Ext.:
SSN:

A simple component to select color in the same way you select color in Adobe Photoshop.

You can allow alpha transparency selection. Check out these example.

Show pallete only. If you'd like, spectrum can show the palettes you specify, and nothing else.


The datepicker is tied to a standard form input field. Click on the input to open an interactive calendar in a small overlay. If a date is chosen, feedback is shown as the input's value.

Set the numberOfMonths option to an integer of 2 or more to show multiple months in a single datepicker.

Display the datepicker embedded in the page instead of in an overlay.


Datetimepicker style variant on top of AmazeUI Datetimepicker.


Datetimepicker style variant 2 by jquery-simple-datetimepicker


Datetimepicker style variant 3 by picker.js


Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Single Select

Single Select with Search

Single Select (Disabled)

Multiple Select

Multiple Select with Pre-Filled Input

Multiple Select (Disabled)


Easy, flexible and responsive range slider with skin support.


Below is the modern skin slider default.


Below is the outline skin slider default.