Text Input

Usage

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.

Behaviour

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"
        }
    }
}

• type (String) - the type attribute for a text-input
• id (String) - an id for the component
• ariaDescribedBy (String) - used to indicate the IDs of the elements that describe the text input
• ariaLabel (String) - used to define a string that labels the text input
• dataType (String) - specifies the type of input element to display
  • Allowed values: any HTML Input type (https://www.w3schools.com/html/html_form_input_types.asp)
• description
• disabled (Boolean) - set to true in order to disable the text input
  • Default: false
• height (String) (Optional) - defines the height of the text input, choose from:
• Allowed values: {l, m, s, xs}
• Default: m
• inlineLabel (Boolean) - display label in same line with input
  • Default: false
• label (String) - a label for the text input
• maxLength (String) - specifies the maximum number of characters allowed in the text input
• 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
• showCount (Boolean) - set to true to display a words counter next to the form control
  • Default: false
• 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 Text input Usage and Visual styleguides in our Storybook