Text Fields
Updated over a week ago

Play’s text field element enables you to easily add an input text field to your page. It can be used for creating different types of forms like log-in screens. Play’s text field element lets you customize Apple’s native text field.

Placeholder Text

The Placeholder Text attribute lets you enter the text that will appear in the text field before a user begins typing in it. For example, your placeholder text may be something like “username” or “password”.

Value

If you want a text field to be pre-populated with a value, enter it in the Value attribute. Soon, Pro users will be able to assign the text field a variable.

Type

Using the Type property, you can select the text element’s type style. Type styles include font family, style, size, line height, and letter spacing. Play provides a set of default type styles like Title 1, Body, and Caption, but you can choose to add your own or edit any of the existing type styles as well.

To add or edit a Type style, tap the chain icon on iOS or open the Styles Panel on macOS.

If you want to upload a custom font, you can add it as an asset from the Insert Bar in macOS.

Color

You can select the color for the text, placeholder text, and the text field’s background using the three Color properties. You can use any color from the project's Color styles.

Text Alignment

Align the text field’s text to the left, center, right, or justified.

Keyboard

The Keyboard attribute lets you customize the text field’s keyboard. It’s set to Auto by default, which means it will use the default QWERTY keyboard. If you turn Auto off, you can then customize the keyboard.

Type

Set the keyboard’s type to default, email, number pad, or phone pad.

Return Key

The Return Key attribute lets you change the CTA on the return key to Go, Google, Join, Next, Route, Search, Send, Done, or Continue.

Appearance

Choose the appearance of the keyboard: Auto, Light, or Dark.

Auto Correction

Choose whether the text field will use auto correction.

Show Clear Button

The Show Clear Button property lets you choose whether your clear button will show While Editing, Unless Editing, Never, or Always.

Password

Turn the Password attribute on to make your text field’s value display as a password. Anything the user types will show as dots like a password field, not as text characters.

Tag

The Tag property gives the text field a tag number. This is useful when you have multiple text fields on a page and want to control which text field has focus after a given action. The Tag property is used in conjunction with the Set Focus action.

Control Padding

Adjust the top and bottom padding for the text field.

Did this answer your question?