Text Area

The textarea element is a field for multi-line text input, allowing users to edit multiple lines of plain text. Text areas are useful to collect or edit runs of text like messages, opinions, reviews, articles, etc.

Attributes

Using Input Validation

With Symphony v20.6, bot developers can use Regex to validate text fields and text areas using the pattern and pattern-error-message attributes. For more information and examples, refer to Regular Expressions - Regex.

Rules and Limitations

  • The text field must be a self-closing tag or have no children.

  • You can add a default text in your text area by including it between the <textarea></textarea> tags. Note that unlike the placeholder text, the default text will be sent with the form if not edited by the user. Refer to Examples for more information.

Examples

The following example shows two textareas being used as follows:

  • The first textarea (id1) shows how to display a default text ("With initial value"). Note that the default text would have been sent to the payload if it had not been deleted before submitting the form.

  • The second text-field (req) shows how a placeholder text ("Required, with a placeholder, a regex, a label, and a tooltip") is displayed in the UI. Please note the placeholder text is not sent in the payload if no text has been entered in the field by the enduser. It shows as well the behaviour of a required textarea in a form, which cannot be submitted in case it is not filled; an error is displayed under the textarea in case the user submits the form with this empty field. The textarea presents how a label text ("My Label") as well as a title text ("My Tooltip/n With a second line") are displayed in the UI. Finally, it shows how users can interact with a regex pattern which does not allow the form to be submitted if the input does not follow the pattern required by the bot developer.

<messageML>
  <form id="form_id">
    <h2>textareas</h2>
      <textarea name="id1" >With initial value</textarea>
      <textarea name="req" required="true" label="My label" title="My title\nWith second line" pattern="^[a-zA-Z]{3,3}$" pattern-error-message="My error message - must contain exactly 3 letters" placeholder="Required, with a placeholder, a regex, a label, and a tooltip"></textarea>
      <button name="textarea">Submit</button>
  </form>
</messageML>

Versions and Compatibility

Last updated