`textarea`

This component represents a multi-line text field.

Configuration

For general configuration options, see General Component Configuration.

Specific Configuration

autoGrow (boolean): When true is set, the text field automatically expands to accommodate text input maxHeight
type ("textarea"): Type of the component.
value (Binding | string): Value of the field.

General Configuration

In addition to the configurations that apply to all components, the following configurations can optionally be set: //boxLabel settings, disabled, errorTarget, icon, Label, Label settings, onChange, readOnly, required.

Custom Styling

The visual design of the text fields is primarily controlled via global variables. CSS can be used specifically for certain deviations.

Using the attribute cls , you can apply your own CSS rules. The component provides the following standard selectors for this purpose:

.textarea: Styles for the text field’s container.
.textarea-label / .textarea .label: Direct access to the text field’s Label.
.textarea .value: Access to the text field’s input element.

Example

textarea.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "styles": {
      "css": ".textarea .label { background-color: #e18a502f}"
    }
  },
  "components": [
    {
      "type": "container",
      "label": "Textarea Component Example",
      "components": [
        {
          "type": "textarea",
          "label": "My Textarea",
          "value": "Hello World\nnice to meet\nyou"
        },
        {
          "type": "textarea",
          "value": "${/data/text}"
        },
        {
          "type": "textarea",
          "autoGrow": true,
          "maxHeight": 200,
          "value": "Text\nOver\nMultiple\nLines\nWith\nAutoGrow\nOn"
        }
      ]
    }
  ],
  "state": {
    "data": {
      "text": "Some Text"
    }
  }
}

Embedded preview

Open preview in a separate window

Keywords: