Textfield

<tpg-text-field></tpg-text-field>

Basic usage

Text fields allows users to enter text into the UI; can contain aiding icons. When used in a Logic Group, the Position variants (Left, Middle, Right) should be used to visually group the content together.

Examples

Types

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

Component

Vanilla JS

  <tpg-text-field
    type="default"
    value="Default text"
    label="Default"
  ></tpg-text-field>
  <tpg-text-field
    type="error"
    value="Error text"
    label="Error"
  ></tpg-text-field>
  <tpg-text-field
    type="warning"
    value="Warning text"
    label="Warning"
  ></tpg-text-field>
  <tpg-text-field
    type="danger"
    value="Danger text"
    label="Danger"
  ></tpg-text-field>

React

  <tpg-text-field
    type="default"
    value="Default text"
    label="Default"
  ></tpg-text-field>
  <tpg-text-field
    type="error"
    value="Error text"
    label="Error"
  ></tpg-text-field>
  <tpg-text-field
    type="warning"
    value="Warning text"
    label="Warning"
  ></tpg-text-field>
  <tpg-text-field
    type="danger"
    value="Danger text"
    label="Danger"
  ></tpg-text-field>

Setting icons

Use the leading-icon-template and trailing-icon-template attributes to set icons.

Component

Vanilla JS

  <tpg-text-field
    type="default"
    label="Leading"
    value="Default with leading icon"
    class="has-leading-icon"
  ></tpg-text-field>

  <tpg-text-field
    type="default"
    value="Default with trailing icon"
    label="Trailing"
    class="has-trailing-icon"
  ></tpg-text-field>

  <tpg-text-field
    type="default"
    value="Default with both"
    label="Leading and trailing"
    class="has-leading-icon has-trailing-icon"
  ></tpg-text-field>

  <script>
      document.addEventListener('DOMContentLoaded', ()=>{
          // Adds placeholder icons onto text fields with relevant classes applied
          const elementsWithLeadingIcon = document.querySelectorAll('.has-leading-icon');
          const elementsWithTrailingIcon = document.querySelectorAll('.has-trailing-icon');

          for (const elem of elementsWithLeadingIcon) {
              const element = elem; // api is same for all non-icon elements
              element.leadingIconTemplate = tpgIconPlaceholderCustom;
          }

          for (const elem of elementsWithTrailingIcon) {
              const element = elem; // api is same for all non-icon elements
              element.trailingIconTemplate = tpgIconPlaceholderCustom;
          }
      });
  </script>

React

  <tpg-text-field
    type="default"
    label="Leading"
    value="Default with leading icon"
    leadingIconTemplate={tpgIconPlaceholderCustom}
  ></tpg-text-field>

  <tpg-text-field
    type="default"
    value="Default with trailing icon"
    label="Trailing"
    trailingIconTemplate={tpgIconPlaceholderCustom}
  ></tpg-text-field>

  <tpg-text-field
    type="default"
    value="Default with both"
    label="Leading and trailing"
    leadingIconTemplate={tpgIconPlaceholderCustom}
    trailingIconTemplate={tpgIconPlaceholderCustom}
  ></tpg-text-field>

Message

Alert users with the message attribute

Component

Vanilla JS

  <tpg-text-field
    label="Default"
    message="This is a default message!"
  ></tpg-text-field>
  <tpg-text-field
    type="danger"
    label="Danger"
    message="This is a danger message!"
  ></tpg-text-field>
  <tpg-text-field
    type="warning"
    label="Warning"
    message="This is a warning message!"
  ></tpg-text-field>
  <tpg-text-field
    type="error"
    label="Label"
    message="This is a error message!"
  ></tpg-text-field>

React

  <tpg-text-field
    label="Default"
    message="This is a default message!"
  ></tpg-text-field>
  <tpg-text-field
    type="danger"
    label="Danger"
    message="This is a danger message!"
  ></tpg-text-field>
  <tpg-text-field
    type="warning"
    label="Warning"
    message="This is a warning message!"
  ></tpg-text-field>
  <tpg-text-field
    type="error"
    label="Label"
    message="This is a error message!"
  ></tpg-text-field>

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-field
    label="With a counter"
    value="Some value"
    counter="20"
  ></tpg-text-field>

React

  <tpg-text-field
    label="With a counter"
    value="Some value"
    counter="20"
  ></tpg-text-field>

Clear text

Use the clear-button attribute to add a button that clears the text. Pressing the clear-button causes the Textfield to emit a TpgChangeEvent.

Component

Vanilla JS

  <tpg-text-field
    value="Some value"
    clear-button
  ></tpg-text-field>

React

  <tpg-text-field
    value="Some value"
    clearButton
  ></tpg-text-field>

Unit of measurement

Use the uom attribute to add a Unit of Measurement.

Component

Vanilla JS

  <tpg-text-field
    label="With a UOM"
    value="12345"
    uom="km"
  ></tpg-text-field>

React

  <tpg-text-field
    label="With a UOM"
    value="12345"
    uom="km"
  ></tpg-text-field>

States

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

Component

Vanilla JS

  <tpg-text-field
    label="Enabled"
    value="Enabled (default)"
  ></tpg-text-field>
  <tpg-text-field
    label="Readonly field"
    value="Readonly"
    read-only
  ></tpg-text-field>
  <tpg-text-field
    label="Disabled field"
    value="Disabled"
    disabled
  ></tpg-text-field>

React

  <tpg-text-field
    label="Enabled"
    value="Enabled (default)"
  ></tpg-text-field>

  <tpg-text-field
    label="Readonly field"
    value="Readonly"
    readOnly
  ></tpg-text-field>

  <tpg-text-field
    label="Disabled field"
    value="Disabled"
    disabled
  ></tpg-text-field>

Handling events

The Textfield emits a TpgInputEvent whenever it receives input from a user, TpgChangeEvent when value is cleared using the Clear Button, and TpgBlurEvent whenever the Textfield loses focus. Below are some basic examples of how these events are handled

Component

Vanilla JS

  <tpg-text-field
    value="Type something"
    label="Check console for output"
    id="tpg-text-field"
    clear-button

  ></tpg-text-field>

  document.addEventListener('DOMContentLoaded', ()=>{
      const textfield = document.getElementById('tpg-text-field');

      // Adds an event listener to the textfield, outputting the current value in the console.
      textfield.addEventListener('tpg-input', (e) => {
        const textfield = e.target;
        console.log(textfield.value)
      })

      // Listens for a change event emitted when pressing the clear button
      textfield.addEventListener('tpg-change', (e) => {
        console.log("Textfield has been cleared!")
      })

      // Listens for blur event emitted when textfield loses focus
      textfield.addEventListener('tpg-blur', (e) => {
        console.log("Textfield lost focus!")
      })
  });

React

  <tpg-text-field
    value="Type something"
    label="Check console for output"

    ontpg-input={(e: TpgInputEvent<string>) => {
      const textfield = e.target as TextField;
      console.log(textfield.value)
    }}
    ontpg-change={(e: TpgChangeEvent<string>) => {
      console.log("Textfield value has been cleared!", e)
    }}

    ontpg-blur={() => console.log("Textfield lost focus!")}
  ></tpg-text-field>

Tables

Properties

Attribute	Property	Description	Type	Default Value
label	label	Textual label of the textfield	string	''
uom	uom	Textual label of the textfield's UOM	string	''
placeholder	placeholder	Optional placeholder that is visible if message is empty	string	''
value	value	The value of the textfields input element	string	''
counter	counter	Adds a counter that keeps track of how many characters are present in value property.	number	0
type	type	The type of textfield to render in terms of severity-level.	'default' | 'error' | 'warning' | 'danger'	'default'
disabled	disabled	Flag that disables the textfield	boolean	false
read-only	readOnly	Flag that makes the textfield readOnly	boolean	false
clear-button	clearButton	Flag that includes a button to clear the text if included	boolean	false
leading-icon-template	leadingIconTemplate	URI-encoded SVG template for the button's icon. Supported constants are found in	IconConstant | ''	''
trailing-icon-template	trailingIconTemplate	URI-encoded SVG template for the button's icon. Supported constants are found in	IconConstant | ''	''
message	message	Message to appear on badge if set.	string	''
input-type	inputType	Specifies the type of the underlying HTML <input> element.	'text' | 'password' | 'number' | 'date'	'text'
truncate	truncate		boolean	false
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-field receives input while not disabled or readonly. Contains the new input value.
tpg-blur	ontpg-blur	Event emitted When the text-field loses focus
tpg-focus	ontpg-focus	Event emitted When the text-field loses focus
tpg-change	ontpg-change	Event fired when clear button is pressed

Functions

Name	Description	Arguments
focus	This method can be called to shift focus to the input field managed by the textfield.	No parameters
blur	This method can be called to unfocus the input field managed by the textfield.	No parameters
scroll	This method can be used to control the scroll of the input.	options: ScrollToOptions
scroll		x: number y: number
scroll		arg1: ScrollToOptions | number arg2: number

Slots

Name	Description
No slots found.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox