Textinput

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 Textinput component.

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

Styling

Textinputs can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables and a quick description of what you will style.

CSS Variable	Description
--gui-space-gap--inner	Label gap and margin bottom
--gui-padding	Input padding
--gui-color-border	Input border color
--gui-radius	Input radius
--gui-color-bg	Input background color
--gui-color-fg	Input text color
--gui-color-primary	Input border color and outline on focus
--gui-color-error	Input border color when invalid
--gui-space-gap	Icon left padding
--gui-icon-space-gap	Icon right padding
--gui-font-size--small	Hint font size
--gui-color-fg--secondary	Hint font color

Anatomy

This is the anatomy of the Textinput Component in case you want to use your CSS styles.

textinput.html

<gui-textinput>
  <label for="fieldUid">
    Label
    <div class="gui-textinput__hint" id="fieldUid_hint">Hint</div>
  </label>

  <div class="gui-field">
    <input
      type="text"
      id="fieldUid"
      class="gui-textinput__icon gui-textinput__icon--right"
      disabled
      readonly
      placeholder="Custom placeholder"
      aria-required="true"
      aria-describedby="fieldUid_hint"
    />
    <span class="gui-textinput__icon gui-textinput__icon--right"></span>
  </div>
</gui-textinput>