#### Forms - Editable

Statistics Invoices Schedule

##### Editable inputs

Enable editable:
X-editable - library, that allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes. By default, x-editable supports 13 input types, such as checkboxes, text fields, textareas, selects, dates etc. Also this library supports `Select2` and `Typeahead` integrations by default and some other examples with custom components built in.

Basic examples
Simple text field | Simple text field | Basic example with `data-type="text"` text input
Text field with help block | With help block | Display helper text below the input field
Empty text field |  | Open popover with empty value text field
Required text field |  | Example of empty required text field
Input group with addon | Eugene | Basic input group example with text or icon addon
Input group with button | Eugene | Display input group with button addon
Input group with dropdown | Eugene | Display input group with button dropdown. Supports all possible button and dropdown variations
Default textarea | Awesome user! | Display basic textarea with `data-type="textarea"`
Elastic textarea | Awesome user! | Elastic textarea integration example
Button color options | Eugene | Choose different button colors and sizes
Autotext option | Group: | Originally element is empty, but text is rendered when editable applied
Icon options | Eugene | Change default icons for buttons
Several fields |  | Multiple fields example with `data-type="address"`
Checkers and switchers
Unstyled single checkbox |  | Display editable popup with single unstyled checkbox
Unstyled checklist |  | Display editable popup with list of checkboxes
Styled single checkbox |  | Display editable popup with single checkbox, styled with `Uniform` plugin
Styled checklist |  | Display popup with list of styled checkboxes
Checklist as unordered list | [edit] | Displaying checked checkboxes as unordered list
Single Switchery toggle |  | Display single Switchery toggle instead of checkbox
Multiple Switchery toggle |  | Display multiple Switchery toggles as a checklist
Basic selects
Basic select |  | Basic unstyled select box, initialized with `data-type="select"`. Options can be defined via javascript `$().editable({...})` or via `data-*` html attributes.
Select with remote source | Admin | Display popup with select box, that loads data from remote source
Select with loading error | Active | Display error message while loading select options
Dependent select lists | Default list: Dependent list: | Dependent selects - can't select 2nd select if 1st is empty
Date field |  | Date select boxes in `YYYY-MM-DD` format
Datetime field |  | Date and time select boxes in `YYYY-MM-DD HH:mm` format
Select2 selects
Single Select2 select |  | Example usage of a single Select2 select box
Multiple Select2 selects |  | Example usage of multiple Select2 select box. This example doesn't have selected tags by default and displays a placeholder instead
Select2 remote source |  | Loading remote source into Select2 select
Advanced usage
Disabled clear option | Disabled clearing | Clear input field functionality can be enabled or disabled via `clear: true/false` option
Typeahead implementation |  | Example of implemented Twitter Typeahead suggestion engine
Render server response | Awesome | Render server response into element
Process JSON response | Awesome | Process JSON response. Try to submit empty field
Date picker | 25.02.2013 | Example with integrated Bootstrap Datepicker plugin
PUT method submit | Awesome | Submit editable form via PUT method
Additional components
Input mask |  | Display editable popup with input mask attached to the text field
Input formatter |  | Display editable popup with specified text field format
Basic Touchspin implementation |  | Basic example with integrated Touchspin spinner
Advanced Touchspin implementation |  | More complex example of a Touchspin spinner integrated to the editable field
Tagsinput with text |  | Tagsinput plugin example. Display values as text
Tagsinput with labels |  | Tagsinput plugin example. Display values as labels
HTML5 input types
Password input type | Password | A single-line text field whose value is obscured. Use the maxlength attribute to specify the maximum length of the value that can be entered
Email input type | Email | A field for editing an e-mail address. The input value is validated to contain either the empty string or a single valid e-mail address before submitting
URL input type | URL | A field for editing a URL. Line-breaks and leading or trailing whitespace are automatically removed from the input value
Tel input type | Phone # | A control for entering a telephone number; line-breaks are automatically removed from the input value, but no other syntax is enforced
Number input type | Number | A control for entering a floating point number
Range input type | Range | A control for entering a number whose exact value is not important
Time input type | Time | A control for entering a time value with no time zone.