# j-Input > j-Input is multifuncional input component which supports a lot of features and it's optimized for everyday usage. It's a great alternative to j-Textbox and j-Dropdown. Works only with jComponent +v17. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: en Content-SHA256: 25c6758b92023ff06d8a46fceab326b61921899f46c896b6967b39004a709ec9 Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded __j-Input__ is multifuncional `input` component which supports a lot of features and it's optimized for everyday usage. It's a great alternative to `j-Textbox` and `j-Dropdown`. Works only with jComponent `+v17`. __Configuration__: - `type {String}` optional, values: - empty value means default `text` - `email`, - `multiline` - `checkbox` - `phone` - `password` - `zip` - `date` (needs `datepicker` component) - __NEW__: `datetime` (needs `datepicker` component) - `time` (needs `timepicker` component) - `color` (needs `colorpicker` component) - `icon` (needs `faicons` component) - `emoji` (needs `emoji` component) - `url` - `number` - `number2` (nullable) - `search` - `lower` - `upper` - `slug` - `id` - __NEW__: `radiobutton` - __NEW__: `tags` - __NEW__: `tags-lower` - __NEW__: `tags-upper` - __NEW__: `tags-id` - __NEW__: `tags-email` - __NEW__: `tags-slug` - __NEW__: `tags-phone` - __NEW__: `tags-url` - `required {Boolean}` optional, enables "required" (default: `false`) - `icon {String}` optional, icon for label e.g. `home`, `cog`, etc. - `licon {String}` optional, left icon e.g. `home`, `cog`, etc. - `liconclick {String}` optional, a path to method `function(component, input)` - `ricon {String}` optional, right icon e.g. `home`, `cog`, etc. - `riconclick {String}` optional, a path to method `function(component, input)` - `label {String}` optional, a label (default is HTML content) - `autofocus {Boolean}` optional, focuses the input (default: `false`) - `align {String}` optional, `left` (default), `2` / `right` or `1` / `center` - `after {String}` optional, it means a char after label (default: `:`) - `autofill {Boolean/String}` optional, enables browser's autofill feature (`string` will be used as an input name, default: `false`) - `placeholder {String}` optional, adds a `placeholder` text into the input - `maxlength {Number}` optional, sets a maximum length of chars (default: `200`) - `minlength {Number}` optional, sets a minimum length of chars - `minvalue {Number}` optional, a minimal value for `number` type - `maxvalue {Number}` optional, a maximal value for `number` type - `increment {Number}` optional, sets a value for incrementing (default: `1`) - `validate {String}` optional, a condition for validating of value, can contain a link to `function(value)` or `!!value.match(/[a-z]+/)` - `format {String}` optional, output formatting e.g. for `date` type: `yyyy-MM-dd`, for `time` type: `HH:mm`, for `number` you can define max. decimals (Default: `auto`) - `disabled {Boolean}` optional, disables this component - `error {String}` optional, adds a `string` text under the component - `autocomplete {String}` optional, needs to contain a link to a function, is triggered on `focus` event - `spaces {Boolean}` optional, enables spaces otherwise it removes them (default: `true`) - `innerlabel {Boolean}` optional, enables inner label (default: `true`) - `dirsource {String}` optional, path to a data-source or __NEW__ to `function(search, next)` (path must contain `/` or __NEW__: `id|name,id|name` - `dircustom {String/Boolean}` optional, can contain a path to `function(val, next(new_val))` or can be `Boolean`. This option can enable adding a custom value (value not defined in data-source) - `dirrender {String}` optional, a path to `function(item, text)` (must return HTML for `j-Directory`), this function can affect list of items in `j-Directory` - `dirminwidth {Number}` optional, a minimum width for `j-Directory`, default: `200` - `dirmaxwidth {Number}` optional, a maximum width for `j-Directory` - `diroffsety {Number}` optional, `Y` offset (default: `0`) - `diroffsetx {Number}` optional, `X` offset (default: `0`) - `dirplaceholder {String}` optional, a placeholder for `j-Directory` - `dirempty {String}` optional, adds an empty field for `j-Directory` - `dirkey {String}` optional, a key name for reading of `text` in `dirsource` (default: `name`) - `dirvalue {String}` optional, a key name for reading of `value` in `dirsource` (default: `id`) - `direxclude {Boolean}` optional, excludes a current value from `j-Directory` (default: `true`) - `dirsearch {Boolean|String}` optional, can disable search in `j-Directory` (default: `true`) or `{String}` (key name) can map a value for searching - `dirraw {Boolean}` optional, can disable escaping of items for `j-Directory` (default: `false`) - `dirdetail {String}` optional, a link to the function `function(val, next(NEW_TEXT))` (targeted for to `dirsource`) - `dirfilter {String}` optional, an inline filter conditional method, for example: `value.id !== 2` (targeted for to `dirsource`) - __NEW__: `dirrawrender {Boolean}` optional, if the `dirsource` doesn't include value it will render a raw value (default: `true`) - `mask {String}` optional, can contain a mask in the form `###/##` (`#` is replaced for a char) - `maskregexp {String}` optional, can contain RegExp for each char in the form `\d,\d,\d,null,\d,\d` (`,` is delimiter) - `masktidy {Boolean}` optional, the component returns only raw chars without fixed chars (default: `false`) - `autosource {String}` a path to the search source `Array` (__NEW__) or `function(search, render(arr))` for dynamic searching - `autovalue {String}` a property path for the value in `autosource`, default: `name` - `autoexec {String}` a path method `function(item, next(value_to_input))` - `searchalign {Number}` can align icon on `type:search` to left (`2`) or right (`1`, default) - `forcevalidation {Boolean}` enables for force validation for `phone` and `email` (default: `true`) - `camouflage {Boolean|String}` masks the value in the input after is triggered `blur` event (default: `false`) or it can be `String` which will be used as a camouflage - `monospace {Boolean}` enables `monospaced` font (default: `false`) - `multiple {Boolean}` enables checkboxes if `dirsource` is not empty - `tabindex {Number}` adds a tabindex (default: `0`) - `tabs {Boolean}` enables tabs for multiline (default: `true`) - `readonly {Boolean}` block text field edition (default: `false`) - `transform {String}` a link to the `function(value, config)` for transforming of entered values - `multiline {Boolean}` works only with `radiobutton` type - `separator {String|Boolean}` a separator for multiple rendered values - `realtime {Boolean}` enables real-time binding (default: `true`) - `exec {String}` a link to the `function(value, element)` which will be evaluated if the input is affected __Interesting:__ - `type:date` needs __`datepicker`__ component - `type:time` needs __`timepicker`__ component - `dirsource:path.to.datasource` needs __`directory`__ component - if `licon` or `ricon` starts with `!` then the component render a raw value instead of `icon` - `ui-input-ok` class is binded when the input is validated and filled - `SET('path', 'camouflage', 'show');` shows the value for 2000 ms ```video https://www.youtube.com/watch?v=Ne3ezaP0w34 ``` Use it with ``. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license. ```html example.html
Framework I agree with terms Notes Frameworks
City
Tags
Date
Search
Password
ZIP
Email
Phone
Gender
Gender
Your age
```