Textinput

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

Programmatic

textinput.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'textinput',
      path: 'listName',
      label: 'First Name',
    },
  ],
});

JSON

textinput.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "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
autocomplete	string	'on', 'off', or a space-separated list of W3C autofill tokens

Placeholder

Use the property placeholder to add a placeholder.

Programmatic

textinput.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'textinput',
      path: 'listName',
      label: 'First Name',
      props: {
        placeholder: 'Enter your first name',
      },
    },
  ],
});

JSON

textinput.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "textinput",
      "path": "listName",
      "label": "First Name",
      "props": {
        "placeholder": "Enter your first name"
      }
    }
  ]
}

Hint

Note

A label is required for the hint to be displayed.

Use the property hint to add a description.

Programmatic

textinput.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'textinput',
      path: 'password',
      label: 'Street Address',
      props: {
        hint: 'Your street address as stated in your Document ID',
      },
    },
  ],
});

JSON

textinput.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "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.

Programmatic

textinput.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'textinput',
      path: 'phoneNumber',
      label: 'Phone Number',
      props: {
        icon: 'phone_callback',
      },
    },
    {
      kind: 'input',
      type: 'textinput',
      path: 'email',
      label: 'Email',
      props: {
        icon: 'alternate_email',
      },
    },
  ],
});

JSON

textinput.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "textinput",
      "path": "phoneNumber",
      "label": "Phone Number",
      "props": {
        "icon": "phone_callback"
      }
    },
    {
      "uid": "",
      "kind": "input",
      "type": "textinput",
      "path": "email",
      "label": "Email",
      "props": {
        "icon": "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-widget">
    <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>