Textarea
Overview of the Textarea Component
The TextareaWrapper component is used for multi-line text input. A native Textarea element is rendered inside of the component. The user experience and interactivity of the TextareaWrapper component is improved by having control over the native Textarea.
Unlike the native Textarea element, the Ionic Textarea does not support loading its value from the inner content. The Textarea value should be set in the value attribute.
The TextareaWrapper component accepts the native Textarea attributes in addition to the Ionic properties.
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 TextareaWrapper component is created with two default child components: Textarea and ItemLabel.
Common 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 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. |
Textarea
Setting the Textarea 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 | The textarea value. |
| Placeholder | Instructional text that shows before the input has a value. |
| Placeholder I18n | If set to True then use the Placeholder property for internationalization. |
| Cols | The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. |
| Rows | The number of visible text lines for the control. |
| Auto Grow | If set to true, the element height will increase based on the value. |
| Debounce | The amount of time set in milliseconds, to wait to trigger the ionChange event after each keystroke. This also impacts form bindings such as ngModel or v-model. The default is set to 0. |
| Readonly | If set to true, the value cannot be modified. |
| Wrap | Indicate how the control wraps text: Hard, Off or Soft. |
| [(ngModel)] | Angular directive for data binding. |
| (ionBlur) | The event emitted when the input option is blurred. |
| (ionChange) | The event emitted when the input value has changed. |
| (ionFocus) | The event emitted when the input option has focus. |
| (ionInput) | The event emitted when a keyboard input occurs. |
Textarea Features Properties
| Property Name | Property Description |
|---|---|
| Autocapitalize | Indicate whether and how the text value should be automatically capitalized while being entered/edited by the user. |
| Autofocus | This Boolean attribute allows specifying that a form control should have input focus when the page loads. Defaults are set to false. |
| Clear On Edit | If set to true, the value will be cleared after focus upon edit. |
| Enterkeyhint | A hint to the browser for which enter key to display. Possible values: enter, done, go, next, previous, search, and send. |
| Inputmode | A hint to the browser for which keyboard to display. Possible values: none, text, tel, url, email, numeric, decimal, and search. |
| Maxlength | This attribute specifies the maximum number of characters that can be entered. |
| Minlength | This attribute specifies the minimum number of characters that can be entered. |
| Required | If set to true, the user must fill in a value before submitting a form. |
| Spellcheck | If set to true, the user must fill in a value before submitting a form. |
Styles Properties
| 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. |
Visit the Ionic documentation to read more about Textarea.
Updated about 5 hours ago