Text-area

Usage

A multiple line, free-form entry input component allowing users to type or edit medium to large amount of information, such as comments and descriptions.

Behaviour

When the component is active the user should be able to enter/ edit information. Typing text is accessible through a physical or virtual keyboard. As the text overflows the box limits, it continues in the next row.

JSON structure example

"viewDefinition": {
    "children": {
        "textareaComponent": {
            "type": "textarea",
            "id": "textareaId",
            "ariaLabel": "Textarea",
            "description":  "Textarea description",
            "disabled": false,
            "inlineLabel": false,
            "label": "Textarea",
            "maxLength": "20",
            "name": "textarea",
            "placeholder": "Please enter text",
            "readOnly": false,
            "required": false,
            "rows": "7",
            "showCount": true,
            "showFullDescription": false,
            "value": "Text value",
            "width": "m"
        }
    }
}

• id (String) - an id for the component
• ariaLabel (String) - used to define a string that labels the text input
• description (String) - a text describing the purpose or value of the textarea
• disabled (Boolean) - set to true in order to disable the text input
  • Default: false
• inlineLabel (Boolean) - display label in same line as input
  • Default: false
• label (String) - a label for the textarea
• maxLength (String) - specifies the maximum number of characters allowed in the textarea
• name (String) - name of the form control. Submitted with the form as part of a name/value pair
• placeholder (String) - text that appears in the form control when it has no value set
• readOnly (Boolean) - if true the value will not be editable
  • Default: false
• required (Boolean) - set to true to set the field as required
• Default: false
• rows (String) - the number of text rows in the textarea
• showCount (Boolean) - set to true to display a words counter next to the form control
  • Default: false
• value (String) - value initially selected. By default it will have no selected value at all
• width (String) (Optional) - defines the height of the text input, choose from:
• Allowed values: {fit, l, m, s, xs}
• Default: fit

Do's and Don'ts

For more details, refer to Textarea Usage and Visual styleguides in our Storybook