Input Component

The InputWrapper component is a wrapper for the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input element and works great on desktop devices while integrating seamlessly with mobile device keyboards.

Properties

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

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

InputWrapper Properties

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 - Content or Wrapper. If Wrapper is used, the item will be wrapped into a reorder tag • Icon - custom icon for Reorder with type Content. Click the Default icon button to select the needed icon • Slot - position inside the item: Start or End • SVG Icon - used to select an SVG file. This path will be added as the `src` attribute. Click the Change button to select the uploaded image from Media Manager

Input Component

Setting the Input component properties can be done from the 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. 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 cannot be modified. The default is set to False
Features	• Accept - if the value of the type attribute is File, this attribute indicates 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 to None • Autocomplete - indicates whether the value of the control can be automatically completed by the browser. The default is set to Off • Autocorrect - whether auto-correction should be enabled while the text value is being entered/edited. The default is set to Off • Autofocus - this boolean attribute allows specifying that a Form Control should have input focus when the page loads. The default is set to False • Clear Input - if set to True, a clear icon will appear in the input when there is a value. Clicking it clears the input. The default is set to False • Clear On Edit - if set to True, the value will be cleared after focus upon editing. Defaults to true when type is Password or False 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 is Text, Email, Search, Password, Tel, or URL, 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 is Text, Email, Search, Password, Tel, or URL, this attribute specifies the minimum number of characters to be entered • Multiple - if set to True, more than one value can be entered. This attribute applies when the type attribute is set to Email or File, 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 help users. This attribute applies when the value of the type attribute is Text, Search, Tel, URL, Email, or Password, otherwise it is ignored • Size - the initial size of the control. This value is in pixels unless the value of the type attribute is text or password, in which case it is an integer number of characters • Spellcheck - to check the element's spelling and grammar, set to True. The default is set to False • Step - works with the min and max attributes to limit the increments at which a value can be set. Possible values are any 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 additional attributes to achieve a specific appearance:

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 Component

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:

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.

📘
Note
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's 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. It also supports the functions created under the CODE panel.

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

Visit the Ionic documentation to read more about inputs.