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.

Text Style

Using the Text Style property, you can select the text element’s text style. You can use a custom text style, a System Style, or a Type Style.

Weight, Size, Design, Width, Letter Spacing, and Transform properties all customize the Text Style.

Customize

You can customize the appearance of the text field here. Select the color for the text and placeholder text, as well as the text field's alignment and control padding.

Keyboard

The Keyboard attribute lets you customize the text field’s keyboard. It will use the QWERTY keyboard by default.

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.

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.

Dismiss Button

The Dismiss Button property lets you choose whether the dismiss button is visible on your text field.

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.

Did this answer your question?