azia
UI Elements
Forms
Charts
Tables
Components Forms Form Elements

## Form Elements

Form Input & Textarea

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

Valid State Input

A form control with success, warning and error state.

This is textarea

Custom Checkboxes & Radios

A custom styled checkboxes and radios.

Checkbox Unchecked
Checkbox Checked
Checkbox Disabled
Radio Unchecked
Radio Checked
Radio Disabled

File Browser

A custom styled file browser.

Choose file

Toggle Switches

A custom made toggles with jquery support.

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

Input Groups

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

@
@example.com
$
.00

Input Mask

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:

Color Picker

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.

jQuery UI Date Picker

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

Datetimepicker style variant on top of AmazeUI Datetimepicker.

Datetimepicker Style 2

Datetimepicker style variant 2 by jquery-simple-datetimepicker

Datetimepicker Style 3

Datetimepicker style variant 3 by picker.js

Select2 Box

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)

Range Slider

Easy, flexible and responsive range slider with skin support.

Range Slider (Modern Skin)

Below is the modern skin slider default.

Range Slider (Outline Skin)

Below is the outline skin slider default.