Inputs
Intro
Improve your forms with simple, yet powerful, elements
Autogrowing textareas
Add data-autogrow to your textarea. Add data-trim to trim value automatically
Toggle Password
Add data-password on a checkbox to toggle its corresponding field.
Toggle checkboxes
Tick a checkbox to show new options! Set data-toggle="id_of_fieldset". Clear values when hiding by setting
data-toggle-clear.
Limited inputs
Limit what can be set in the input with data-limited. You can specify multiple limitators using |.
Limit to lowercase with lower or to uppercase with upper. Entered characters are transformed as needed.
Limit to numerical values with numeric. Can be useful when you want to have a type=text (for example, when you allow
values like 01) or to alpha values with alpha
Limit to a character range using regex. Any regex expression is valid.
Limit to a given mask using mask. Use 0-9 for numbers, a for letters and *
for
any. Others characters are added automatically.
Bound inputs
Add data-to to send content to another element. Can be combined with limited inputs.
File uploads
Uploads are great, but dealing with large images is annoying. It's much better to let the browser deal with it. By default,
images will fit in a 1920*1920 square. Simply add a data-resize attribute!
Input files are augmented with the following data attributes:
data-min-width: min width in pixels. Mark input as :invalid if the file is too small.data-min-height: min height in pixels. Mark input as :invalid if the file is too small.data-max-width: max width in pixels. Original image ratio is preserved.data-max-height: max height in pixels. Original image ratio is preserved.data-image-ratio: a ratio (eg: 16:9). Will crop from the center if needed.data-quality: image quality (0 to 1, or a two digit value).
You can also use the data-resize attribute with a simple config string.