Editable inputs
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.