The Text Field component

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

To use the Text Field component in your project:

  1. Open the Components panel, then the UI folder.
  2. Drag the Text Field  component to the stage.
  3. 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 changes.

To select one of these events in the Event dialog, 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 dialog, 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?