Components / Library Version 4.9.0

Textarea

The Textarea component is a multi-line plain-text editing control. A drag handle allows the user to vertically resize the input area. It is very similar to the Input component; it shares most of its functionalities and has very similar properties and events.

PropertiesExamplesAPIAccessibility

* Required property

label *
string
A description for the component. For accessibility reasons it is required even when label-position is set to none.
character-limit
number
The maximum number of characters the user is allowed to submit. When the limit is reached the counter turns red. The component doesn't prevent the user from typing beyond the limit, in order to facilitate pasting and editing. Character count and limit are displayed below the field. Character limiting is disabled when this property is unset.
disabled
boolean
Disables the component.
error-message
string
Set the component in error state with the string passed as the error message.
info
string
Set the info text displayed under the input area.
input-height
string: CSS width value
Determines the initial height of the input area. The user can change the height with a drag handle. Defaults to 3 lines.
input-width
string: CSS width value
Set the width of the input area independently of the width of the component so that label, info text or error message can be wider than the input area. Defaults to 100%.
label-position
top | left | none
Determines the position of the label. Defaults to top. Set to none if no label should be displayed.
placeholder
string
Set the placeholder text within the input area.
required-field
boolean
Indicates the field is required.
value
string
To get the value entered by the user. Line breaks are included as \n. (This property is only a getter. To set the component's initial value, set its text content, e.g. <wm-textarea>initial value</wm-textarea>)

Usage in HTML

Edit the code below to see changes reflected in the example above.

Javascript Sample

Example code for functionality.

Usage in Elm

Code generated from HTML.
input
Emitted when the value of the component changes as a direct result of a user action.
wmTextareaValueChanged
Emitted on blur if the value has changed (since initial load or last blur event).

Screen Reader

Error messages will be announced via an ARIA live region. If the info property is present, info text will be read upon focusing the input field.

If the user is within 5 characters of the limit or above, the message “{N} of {limit} characters added” is announced.