Textarea

Textarea components are Input Fields that allow the user to enter multi-line string chains.

Programmatic

textarea.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'textarea',
      path: 'comments',
      label: 'Comments',
    },
  ],
});

JSON

textarea.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "textarea",
      "path": "comments",
      "label": "Comments"
    }
  ]
}

Props

Use these props to customize your Textarea component.

prop	type	description
placeholder	string	A placeholder text to display when the textarea has no value
hint	string	A description to display below the textarea
icon	string	A css class to display an icon inside the textarea
counterMode	string	Mode for the character counter if maxLength is set, possible values are remaining (default) or current
minimumHeight	number	Minimum height of the textarea in pixels, defaults to 120
autoGrow	boolean	If true, the textarea will automatically expand its height as the user types
autocomplete	string	'on', 'off', or a space-separated list of W3C autofill tokens

Placeholder

Use the property placeholder to add a placeholder.

Programmatic

textarea.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'textarea',
      path: 'comments',
      label: 'Comments',
      props: {
        placeholder: 'Enter your comments here...',
      },
    },
  ],
});

JSON

textarea.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "textarea",
      "path": "comments",
      "label": "Comments",
      "props": {
        "placeholder": "Enter your comments here..."
      }
    }
  ]
}

Hint

Note

A label is required for the hint to be displayed.

Use the property hint to add a description.

Programmatic

textarea.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'textarea',
      path: 'comments',
      label: 'Comments',
      props: {
        hint: 'Please be descriptive.',
      },
    },
  ],
});

JSON

textarea.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "textarea",
      "path": "comments",
      "label": "Comments",
      "props": {
        "hint": "Please be descriptive."
      }
    }
  ]
}

Icon

Use the property icon to add an icon to the textarea. The value of icon represents a set of CSS classes separated by spaces. The icon is displayed inside the textarea on the left.

Programmatic

textarea.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'textarea',
      path: 'comments',
      label: 'Comments',
      props: {
        icon: 'edit_note',
        hint: 'With an icon in the textarea',
      },
    },
  ],
});

JSON

textarea.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "textarea",
      "path": "comments",
      "label": "Comments",
      "props": {
        "icon": "edit_note",
        "hint": "With an icon in the textarea"
      }
    }
  ]
}

Character Counter

Use the validator maxLength to limit the number of characters and display a character counter. You can change how it counts with counterMode (remaining or current).

Programmatic

textarea.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'textarea',
      path: 'commentsRemaining',
      label: 'Comments',
      props: {
        counterMode: 'remaining',
      },
      validator: {
        type: 'string',
        maxLength: 10,
        required: true,
      },
    },
    {
      kind: 'input',
      type: 'textarea',
      path: 'commentsCurrent',
      label: 'Comments',
      props: {
        counterMode: 'current',
      },
      validator: {
        type: 'string',
        maxLength: 10,
        required: true,
      },
    },
  ],
});

JSON

textarea.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "textarea",
      "path": "commentsRemaining",
      "label": "Comments",
      "props": {
        "counterMode": "remaining"
      },
      "validator": { "type": "string", "maxLength": 10, "required": true }
    },
    {
      "uid": "",
      "kind": "input",
      "type": "textarea",
      "path": "commentsCurrent",
      "label": "Comments",
      "props": {
        "counterMode": "current"
      },
      "validator": { "type": "string", "maxLength": 10, "required": true }
    }
  ]
}

Auto Grow

Use the property autoGrow to allow the textarea to expand automatically based on content. You can combine it with minimumHeight to set its initial size.

Programmatic

textarea.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'textarea',
      path: 'comments',
      label: 'Comments',
      props: {
        autoGrow: true,
        minimumHeight: 50,
      },
    },
  ],
});

JSON

textarea.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "textarea",
      "path": "comments",
      "label": "Comments",
      "props": {
        "autoGrow": true,
        "minimumHeight": 50
      }
    }
  ]
}

Styling

Textareas 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-10	Icon left padding or inline-start space
--gui-font-sm	Counter text font size
--gui-space-2	Counter top margin
--gui-intent-error	Counter error color when max length is exceeded
--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

Anatomy

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

textarea-anatomy.html

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

  <div class="gui-widget">
    <textarea
      id="fieldUid"
      class="gui-textarea--icon"
      placeholder="Custom placeholder"
      aria-required="true"
      aria-describedby="fieldUid_hint"
    ></textarea>
    <span class="gui-widget-icon fas fa-comment"></span>
  </div>

  <div class="gui-textarea--validation">
    <div></div>
    <div class="gui-textarea--counter">
      <span>100</span>
      <span> / 100</span>
    </div>
  </div>
</gui-textarea>