A text field is a single-line, fixed-height field, often with rounded corners, that automatically brings up a keyboard when the user taps it. Use a text field to request a small amount of information, such as an email address.
- Show a hint in a text field to help communicate purpose. A text field can contain placeholder text—such as "Email" or "Password"—when there’s no other text in the field. Don’t use a separate label to describe a text field when placeholder text is sufficient.
- Display a Clear button in the right end of a text field when appropriate. When this element is present, tapping it clears the contents of the text field, eliminating the need to keep tapping the Delete key.
- Use secure text fields when appropriate. Always use a secure text field when your app asks for sensitive data, such as a password.
- Use images and buttons to provide clarity and functionality in text fields. You can display custom images in the left or right sides of a text field, or you can add a system-provided button, such as the Bookmarks button. In general, use the left end of a text field to indicate a field’s purpose and the right end to indicate the presence of additional features, such as bookmarking.
How to use
- Drop a
TextFieldcontrol from the object panel to a
- Use the
TextField Inspectorto customize its properties like
The inspector where the
TextField class can be configured.
How to customize
TextField can be customized by tapping the subnode icons (+).
The custom input view to display when the text field becomes active. The user can drop one or more controls in order to create the custom input view.
TextField input view customization.
Keyboard Accessory View
The custom accessory view to display when the text field becomes active. The user can drop one or more controls in order to extend the default keyboard.
TextField keyboard accessory view customization.
The overlay view displayed on the left (or leading) side of the text field.
TextField left view customization.
The overlay view displayed on the right (or trailing) side of the text field.
TextField right view customization.
- Drop a
Buttoncontrol from the object panel to a
- Open the
Code Editor(cmd + 6)
- Select the
Actionitem inside the
Eventsarea and write your custom code in the
TextField1.text = "Text"
Most important properties
Several UI aspects can be configured in the
TextField class but the
nextField are the most commons to be configured.
text: The text displayed by the text field.
textColor: The color of the text.
textAlignment: The technique to use for aligning the text.
nextField: Configures the next field to activate, or nil if there is no next field.
TextField class reference contains a complete list of properties and methods that can be used to customize a