Input
Overview of the Input Component
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 - Content or Wrapper. If Wrapper is used, the item will be wrapped into a reorder tag. Icon - custom icon for Reorder with a 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
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 is File, 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 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 are set 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 get help. 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 - work 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 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.
Updated about 5 hours ago