Textinput Component

Textinput components are Control Fields that allow the user to enter string chains.

textinput.json

{
  "form": {
    "uid": "",
    "kind": "layout",
    "widget": "stack",
    "children": [
      {
        "uid": "",
        "kind": "control",
        "widget": "textinput",
        "path": "listName",
        "label": "First Name"
      }
    ]
  }
}

Props

Use this props to customize your text input control.

prop	type	value
placeholder	string	A placeholder text to display when the text input has no value
hint	string	A description to display below the text input
icon	string	A css class to display an icon
iconPosition	string	The icon position, possible values are right or left

Placeholder

Use the property placeholder to add a placeholder.

textinput.json

{
  "form": {
    "uid": "",
    "kind": "layout",
    "widget": "stack",
    "children": [
      {
        "uid": "",
        "kind": "control",
        "widget": "textinput",
        "path": "listName",
        "label": "First Name",
        "props": {
          "placeholder": "Enter your first name"
        }
      }
    ]
  }
}

Hint

Use the property hint to add a description.

textinput.json

{
  "form": {
    "uid": "",
    "kind": "layout",
    "widget": "stack",
    "children": [
      {
        "uid": "",
        "kind": "control",
        "widget": "textinput",
        "path": "password",
        "label": "Street Address",
        "props": {
          "hint": "Your street address as stated in your Document ID"
        }
      }
    ]
  }
}

Icon

Use the property icon to add an icon to the textinput. The value of icon represents a set of CSS classes separated by spaces. The icon is displayed on the left by default, you can set the property iconPosition to right if you want the icon to be right aligned.

textinput.json

{
  "form": {
    "uid": "",
    "kind": "layout",
    "widget": "stack",
    "children": [
      {
        "uid": "",
        "kind": "control",
        "widget": "textinput",
        "path": "phoneNumber",
        "label": "Phone Number",
        "props": {
          "icon": "material-icons material-icons-phone_callback",
          "iconPosition": "right"
        }
      },
      {
        "uid": "",
        "kind": "control",
        "widget": "textinput",
        "path": "email",
        "label": "Email",
        "props": {
          "icon": "material-icons material-icons-alternate_email"
        }
      }
    ]
  }
}