Text Input


The Text Input component is an input field that allows users to type information inside forms. For example, names and addresses can be entered as short texts using this component.


The field is accessible through clicking or keyboard navigation. It can be set to focus on page load to invite the user to start the interaction.

Typing a text is available through a physical or a virtual keyboard. For the latter, the input selector can display different options: letters, numbers. If the typed in content goes beyond the field limits, the text at the beginning becomes hidden. This text is accessible and editable later on in different ways depending on the OS or the viewport.

JSON structure example

"viewDefinition": {
    "children": {
        "textInputComponent": {
            "type": "text-input",
            "id": "textInputId",
            "ariaDescribedBy": "info",
            "ariaLabel": "Text Input",
            "dataType": "text",
            "decimals": "2",
            "description":  "Text Input description",
            "disabled": true,
            "height": "l",
            "inlineLabel": true,
            "label": "Text Input",
            "maxLength": "20",
            "name": "text-input",
            "placeholder": "Placeholder",
            "readOnly": true,
            "showCount": true,
            "width": "m"

Do's and Don'ts

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