The InputWrapper component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input does and works great on desktop devices and integrates with the mobile devices' keyboards.

Properties

🚧
Important Note!
This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.

Every new InputWrapper component is created with two default child components: Input and ItemLabel.

Property Name	Property Description
Item Wrapped	If set to true, the component will be included in the Item with additional properties
Show Label	If set to true, the component will have a label.
Lines	How the bottom border should be displayed on the item. Possible values are; Full, Inset, None.
Reorder	Reorder properties: Type-ContentorWrapper. IfWrapper* is used, the item will be wrapped into a reorder tag. Icon- custom icon forReorderwith a typeContent. Click theDefault icon* button to select the needed icon. Slot- position inside the item:StartorEnd. SVG Icon- used to select an`svg` file. This path will be added as the `src` attribute. Click the Changebutton to select the uploaded image fromMedia Manager**.

Input

Setting the Input component properties can be done from under Common and/or Styles tabs:

Common Properties

Property Name	Property Description
Name	The name of the control, which is submitted with the form data.
Value	Input value.
Type	The type of control to display. The possible values are Text (default), Password, Email, Number, Search, Tel, URL, Date, Time or File. If the Password type is set, the Add show icon property becomes available, and if set to true, the Show/Hide password icon will be added to the component.
Placeholder	Instructional text that shows before the input has a value.
Placeholder I18n	If set to True then use the Placeholder property for internationalization.
Debounce	Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. The default is set to 0.
Enter Key Hint	An input attribute that specifies what action label or icon to present for the enter key on virtual keyboards: Enter, Done, Go, Next, Previous, Search, Send.
Input Mode	An input attribute indicating which type of keyboard to display: None, Decimal, Email, Numeric, Search, Tel, Text, Url.
Readonly	If set to True, the value can not be modified. The default is set to False.
Features	Accept- if the value of the type attribute isFile, this attribute will indicate the types of files acceptable by the server, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers. Autocapitalize- indicates whether and how the text value should be automatically capitalized while being entered/edited. The default is set toNone*. Autocomplete- indicates whether the value of the control can be automatically completed by the browser. The default: is set toOff*. Autocorrect- whether auto-correction should be enabled while the text value is being entered/edited. The default is set toOff*. Autofocus- this boolean attribute allows specifying that aForm Control should have input focus when the page loads. The default is set to False*. Clear Input- if set toTrue, a clear icon will appear in the input when there is a value. Clicking it clears the input. The default is set toFalse*. Clear On Edit- if set toTrue, the value will be cleared after focus upon editing. Defaults are set totruewhen type isPasswordorFalse** for all other types. Max* - the maximum value, which must not be less than its minimum (min attribute) value. Max Length- if the value of the type attribute isText,Email,Search,Password,telorURL, this attribute specifies the maximum number of characters to be entered. Min** - the minimum value, which must not be greater than its maximum (max attribute) value. Min Length- if the value of the type attribute isText,Email,Search,Password,telorURL, this attribute specifies the minimum number of characters to be entered. Multiple- if set toTrue, more than one value can be entered. This attribute applies when the type attribute is set toEmailorFile*, otherwise, it is ignored. Pattern- a regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to get help. This attribute applies when the value of the type attribute isText,Search,Tel,URL,Email, orPassword*, otherwise, it is ignored. Size- the initial size of the control. This value is in pixels unless the value of the type attribute istextorpassword*, in which case it is an integer number of characters. Spellcheck- to check the element's spelling and grammar, set toTrue. The default is set toFalse*. Step- work with the min and max attributes to limit the increments at which a value can be set. Possible values areany** or a positive floating point number.
[(ngModel)]	Angular directive for data binding.
(ionChange)	The event emitted when the value has changed.
(ionFocus)	The event emitted when the input has focus.
(ionInput)	The event emitted when the value has changed.

Styles Properties

Under the Styles tab, inputs can be styled with an additional attribute to look like in a specific way:

Property Name	Property Description
Text Color	Select CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.

ItemLabel

The ItemLabel component has the following properties:

Common Properties

Property Name	Property Description
Truncate Text	Set to True (default) to truncate label text if it is too long.
Position	The position determines where and how the label behaves inside an item.

Styles Properties

Under the Styles tab, ItemLabel components can be styled with the following attributes to look like in a specific way:

Property Name	Property Description
Font Size	Enter font size in `px`, `%`, `em`, `vh`, and `vw`.
Font Weight	Set the weight (or boldness) of the font: Normal or Bold.

Using Input as a Form Control

Input becomes a Form Control if it is included in a Form component and has the specified Name property. By default, the Name property is set as the Component name property but can be changed:

📘
Use the following description only when the Form component has the disabled Native Validation property. With the Native Validation property enabled, the control can be used as a default HTML Form Control.

To set the control initial value, use the Initial Value property of the Form Control properties section. The component can have only string values or null. If the property isn't specified, the initial value will be null.
When used as a Form Control, the Input component has the Function property that allows adding your custom function for validation. Also, it supports the functions created under the CODE panel:

🚧
Note!
The component can't be used with array iteration data for creating a dynamic form structure. If you need to create such kind of structure, follow these recommendations

Visit the Ionic documentation to read more about inputs.