Textarea

<tpg-text-area></tpg-text-area>

Basic usage

Text Areas are multi-line fields of text.

Text areas do not allow for scrolling inside them. Instead, they can assume one of the following behavior:

• Default: Text areas scale with the text being written, limitlessly

• Character count: Text areas scale until a predefined character count is reached (Not yet implemented.)

• Unfocused line limit: Text areas scale limitlessly, but, when out of Focused, the Text Area will collapse back to show a predefined number of lines. The full text will be shown again if / when the Text Area is Focused (Not yet implemented.)

A large initial size can be set to indicate that longer responses are possible and encouraged.

Examples

Textarea types

Use the type attribute to set the textarea’s type.

Component

Vanilla JS

      <tpg-text-area
        label="Default"
        placeholder="Placeholder..."
      ></tpg-text-area>
      <tpg-text-area
        type="error"
        label="Error"
        placeholder="Placeholder..."
      ></tpg-text-area>
      <tpg-text-area
        type="warning"
        label="Warning"
        placeholder="Placeholder..."
      ></tpg-text-area>
      <tpg-text-area
        type="danger"
        label="Danger"
        placeholder="Placeholder..."
      ></tpg-text-area>

React

      <tpg-text-area
        label="Default"
        placeholder="Placeholder..."
        message="Message"
      ></tpg-text-area>
      <tpg-text-area
        type="error"
        label="Error"
        placeholder="Placeholder..."
        message="Message"
      ></tpg-text-area>
      <tpg-text-area
        type="warning"
        label="Warning"
        placeholder="Placeholder..."
        message="Message"
      ></tpg-text-area>
      <tpg-text-area
        type="danger"
        label="Danger"
        placeholder="Placeholder..."
        message="Message"
      ></tpg-text-area>

Icon

Use the icon-template attribute to set icons.

Component

Vanilla JS

  <tpg-text-area
    value="Default with trailing icon"
    label="Trailing"
    class="has-placeholder-icon"
  ></tpg-text-area>

  <script>
      document.addEventListener('DOMContentLoaded', ()=>{
          // Adds placeholder icons onto text areas with relevant class applied
          const textAreas = document.querySelectorAll('tpg-text-area.has-placeholder-icon');

          for (const elem of textAreas) {
              const textArea = elem as TextArea; // api is same for all non-icon elements
              textArea.iconTemplate = tpgIconPlaceholderCustom;
          }
      });
  </script>

React

    <tpg-text-area
      value="Default with trailing icon"
      label="Trailing"
      iconTemplate={tpgIconPlaceholderCustom}
    ></tpg-text-area>

Message

Alert users with the message attribute. The type attribute changes the styling of the badge rendered when message is included.

Component

Code

  <tpg-text-area
    label="Label"
    value="Some value"
    message="This is a default message!"
  ></tpg-text-area>
  <tpg-text-area
    type="danger"
    label="Label"
    value="Some value"
    message="This is a danger message!"
  ></tpg-text-area>
  <tpg-text-area
    type="warning"
    label="Label"
    value="Some value"
    message="This is a warning message!"
  ></tpg-text-area>
  <tpg-text-area
    type="error"
    label="Label"
    value="Some value"
    message="This is a error message!"
  ></tpg-text-area>

React

  <tpg-text-area
    label="Label"
    value="Some value"
    message="This is a default message!"
  ></tpg-text-area>
  <tpg-text-area
    type="danger"
    label="Label"
    value="Some value"
    message="This is a danger message!"
  ></tpg-text-area>
  <tpg-text-area
    type="warning"
    label="Label"
    value="Some value"
    message="This is a warning message!"
  ></tpg-text-area>
  <tpg-text-area
    type="error"
    label="Label"
    value="Some value"
    message="This is a error message!"
  ></tpg-text-area>

Counter

Use the counter attribute to add a counter.

Note: we do not prevent the user from inputting more text should number of characters exceed the counter limit.

Component

Vanilla JS

  <tpg-text-area
    label="With a counter"
    class="has-placeholder-icon"
    value="Some value"
    counter="20"
  ></tpg-text-area>

React

  <tpg-text-area
    label="With a counter"
    class="has-placeholder-icon"
    value="Some value"
    counter="20"
  ></tpg-text-area>

Rows

Use the rows attribute to set the initial height of the textarea.

Component

Vanilla JS

  <tpg-text-area
    label="One row"
    rows="1"
  ></tpg-text-area>
  <tpg-text-area
    label="Ten rows"
    rows="10"
  ></tpg-text-area>

React

  <tpg-text-area
    label="One row"
    rows="1"
  ></tpg-text-area>
  <tpg-text-area
    label="Ten rows"
    rows="10"
  ></tpg-text-area>

States

The Text Area is enabled by default, but it can be set to disabled or read-only using the corresponding attributes.

Component

Code

  <tpg-text-area
    label="Enabled textarea"
    value="Enabled textarea"
    message="Enabled"
  ></tpg-text-area>

  <tpg-text-area
    label="Readonly textarea"
    value="Readonly textarea"
    message="Read only"
    read-only
  ></tpg-text-area>

  <tpg-text-area
    label="Disabled textarea"
    value="Disabled textarea"
    message="Disabled"
    disabled
  ></tpg-text-area>

React

  <tpg-text-area
    label="Enabled textarea"
    value="Enabled textarea"
    message="Enabled"
  ></tpg-text-area>

  <tpg-text-area
    label="Readonly textarea"
    value="Readonly textarea"
    message="Read only"
    read-only
  ></tpg-text-area>

  <tpg-text-area
    label="Disabled textarea"
    value="Disabled textarea"
    message="Disabled"
    disabled
  ></tpg-text-area>

Handling events

Component

Vanilla JS

  <tpg-text-area
    value="Type something"
    label="Check console for output"
    id="tpg-textarea"
  ></tpg-text-area>

  document.addEventListener('DOMContentLoaded', ()=>{
      // Adds an event listener to the textarea, outputting the current value in the console.
      const textarea = document.getElementById('tpg-textarea');

      textarea.addEventListener('tpg-input', (e) => {
        const textarea = e.target as TextArea;
        console.log(textarea.value)
      })
  });

React

  <tpg-text-area
    value="Type something"
    label="Check console for output"
    ontpg-input={(e: TpgInputEvent<string>) => {
      const textarea = e.target as TextArea;
      console.log(textarea.value)
    }}
  ></tpg-text-area>

Tables

Properties

Attribute	Property	Description	Type	Default Value
value	value	The value of the text area	string	''
placeholder	placeholder	Placeholder to be displayed in the text area.	string	''
label	label	Label to be displayed in the text area.	string	''
counter	counter	Whether or not to display a word counter.	number	0
type	type	What type of text area to render.	'default' | 'error' | 'warning' | 'danger'	'default'
message	message	Whether or not to render a message in reference to the type.	string	''
icon-template	iconTemplate	URI-encoded svg of optional icon to render on the trailing end of the count component	IconConstant | ''	''
disabled	disabled	Whether or not the text area is diabled.	boolean	false
read-only	readOnly	Flag that makes the textarea read-only.	boolean	false
rows	rows	The number of rows to display by default.	number	4
form-associated	formAssociated		boolean	true
name	name	name property for use in conjunction with html forms	string

Events

Event name	Reactjs attribute	Description
tpg-input	ontpg-input	Event emitted when text-area receives input while not disabled or readonly. Contains the new input value.
tpg-focus	ontpg-focus	Event emitted When the text-field loses focus
tpg-blur	ontpg-blur	Event emitted when the text-area loses focus

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
No slots found.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox