The Text Field component

This component is not supported for Google Ads, Google AdMob, AMPHTML ads, video ads or image ads.

The Text Field component lets you add a field where users can enter text.

To use the Text Field component in your project:

Open the Components panel, then the UI folder.
Drag the Text Field component to the stage.
You may want to use the Label component to display text before the text field.

Properties

Property	Description
Name	The component name.
Placeholder	The text shown to users inside the text field when nothing has been entered. The placeholder is for display only, and doesn't affect the field's value.
Value	The default text in the text field. The value overrides the placeholder.

Events and actions

Events sent by the Text Field component

You can trigger other actions based on the following Text Field component events:

Event	Description
Change	Sent when a change to the text field's value is committed (e.g. the user edits the value then clicks elsewhere on the page).
Input	Sent when the text field's contents change.

To select one of these events in the Event dialogue, set the Text Field component as the target.

Actions performed by the Text Field component

The following Text Field component actions can be triggered in response to other events:

Action	Configuration options
Select text in range	Start index – A number representing the first character of the selection. Use `0` to start with the first character. End index – A number representing the character after the last character of the selection. Use `1` to end after the first character. If the end index is greater than the total number of characters in the field, the selection ends after the last character.
Select all text	none

When you select one of these actions in the Event dialogue, set the Text Field component as the receiver.

Learn how to configure events.

Preview

You can't interact with UI components inside the Google Web Designer interface. To see the component in action, preview your document in your preferred browser. The appearance of UI components may vary depending on the browser.

Was this helpful?

How can we improve it?