Text Field

Important

Symphony Elements Beta is only available on pods that have been updated to 1.55.3 and running an agent 2.55.9 or above.

Text input fields are the most common factors of a form. Symphony provides two types of elements for text input fields: Text fields for a single-line input; and Text area for multi-line input.

For a list of all the available elements, refer to Elements.

Attributes

Attribute
Type
Required?
Description

name

String

Yes

Identifies the text field.

placeholder

String

No

Specifies a short hint that describes the expected value of the input field.

required

Boolean

No

If true, it specifies that the input field must be filled out before submitting the form.
Accepted values; true and false.

masked

Boolean

No

If true, it creates a masked text field with hide/show options when its value is "true".
For more information, refer to Masked Text Field.

maxlength

Integer

No

The maxlength attribute allows you to specify a maximum number of characters that the user can input.

minlength

Integer

No

The minlength attribute allows you to specify a minimum number of characters that the user can input.

Rules and Limitations

  • The text field has a max number of 128 characters. For larger texts, use Text Area.
  • The text field must be a self-closing tag or have no children.
  • Text fields are grouped at a max of 4 per row, depending on the screen size. For more information, refer to Alignment of input texts.
  • You can add a default text in your text field by including it between the <text-field></text-field> 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 examples show text fields being used as follows:

  • The first text field (id1) is required and has a placeholder text ("Input some text..."). It has also a default text ("With initial value") which was included between the <text-field></text-field> tags. Note that the default text will be sent to the payload given that it was not deleted before submitting the form.
  • The second text field (id2) is required. It contains a placeholder text and does not have a default text.
  • The third text field (id3) is not required. It contains a placeholder text and does not have a default text.
  • The fourth text field (id4) is required. It does not contain a placeholder or a default text.
<messageML>
  <form id="form_id">
    <text-field name="id1" placeholder="Input some text..." required="true">With initial value</text-field>
    <text-field name="id2" placeholder="Only placeholder" required="true"/>
    <text-field name="id3" placeholder="Not required"/>
    <text-field name="id4" required="true"/>        
         
    <button type="reset">Reset</button> 
    <button name="example-button" type="action">Submit</button> 
  </form>
</messageML>
[
    {
        "id": "q6eUgG",
        "messageId": "NowSKCnJJBdPOXQyoPQg8X___pQDVWaBbQ",
        "timestamp": 1563312167294,
        "type": "SYMPHONYELEMENTSACTION",
        "initiator": {
            "user": {
                "userId": 7078106482890,
                "firstName": "User",
                "lastName": "Bot",
                "displayName": "User",
                "email": "[email protected]",
                "username": "user_bot"
            }
        },
        "payload": {
            "symphonyElementsAction": {
                "actionStream": {
                    "streamId": "0YeiA-neZa1PrdHy1L82jX___pQjntU-dA"
                },
                "formStream": {
                    "streamId": "YuK1c2y2yuie6+UfQnjSPX///pQEn69idA=="
                },
                "formMessageId": "5iSJ+faXx/23Jkehx3lpSn///pQDVedXdA==5587",
                "formId": "form_id",
                "formValues": {
                    "action": "example-button",
                    "id1": "With initial value",
                    "id2": "test",
                    "id3": "",
                    "id4": "test"
                }
            }
        }
    }
]

Updated 6 months ago


Text Field


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.