Use a formatted text field when you require additional functionality such as the textfield input type or a custom validator.
||Determines the characters and format the merchant is permitted to input.||
||The text displayed as the text field title.|
||The initial text value in the text field.|
||Hint text to display when no text is input.|
||The text displayed when an error is detected on merchant input. Displayed beneath the field.|
||Whether the input is a valid option.|
||Whether or not the entered text should auto capitalize.|
||A callback containing the new string when the text field’s value changes.|
||A callback that provides the current value as a string. Return true or false if the string passes validation, and the text field will invalidate/validate.|
- When a merchant opens a new form, the first text field should be in a focused state.
- If the merchant is actively focused in a text field, then the keyboard should come up and the label should move to the top of the field.
- If focus goes away from the text field, then the keyboard should hide.
- Text fields always take up the full screen width.
- Text fields don’t change height. If text entered is longer than the width of the text field, then the oldest text on the left should be hidden to make room.
- When it makes sense, provide autocomplete options (for example, entering an address).
Content guidelinesAnchor link to section titled "Content guidelines"
- If a text field is required, then it should indicate "Required".
- Label titles should be brief and written in sentence case.
- Use the same terms for similar label titles throughout the app.
- Any empty text field shouldn't have help text showing an example of how a text field should be filled out.