Forms - Editable
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 | 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 | 2013.02.25 | 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 | 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. |