TextField
Use a text field to allow merchants to enter or edit text. If you want to specify the kind of input, then use a formatted text field.
| Name | Type | Description |
|---|---|---|
| title | string? |
The text displayed as the text field title. |
| subtitle | string? |
The text displayed underneath the text field. |
| initialValue | string? |
The initial text value in the text field. |
| placeholder | string? |
The hint text to display when no text is input. |
| isValid | boolean? |
Whether the input is a valid option. |
| errorMessage | string? |
The text displayed when an error is detected on merchant input. Displayed beneath the field. |
| onChangeText | ((value: string) => void)? |
A callback containing the new string when the text field’s value changes. |
| rightElementStyle | EmbeddedElementProps? |
Use this value to change the type of the text field. |
EmbeddedElementProps
Anchor link to section titled "EmbeddedElementProps"A text field can take one of the following forms:
- ActionProps: Tells the merchant to perform an action, like submitting an order.
- InfoProps: Displays information to the merchant.
- PasswordProps: Prompts the merchant to input a password.
- SuccessProps: Displays a success message to the merchant.
ActionProps
Anchor link to section titled "ActionProps"| Name | Type | Description |
|---|---|---|
| type | 'action' |
Indicates that the text field is an action type. |
| message | string |
The text displayed in the text field. |
| onPress | (value: string) => void |
A callback to be performed when the text field is pressed. |
| Name | Type | Description |
|---|---|---|
| type | 'info' |
Indicates that the text field is an info type. |
| message | string |
The text displayed in the text field. |
| alwaysShow | boolean? |
Whether the text field is always displayed. |
SuccessProps
Anchor link to section titled "SuccessProps"| Name | Type | Description |
|---|---|---|
| type | 'success' |
Indicates that the text field is a success type. |
| message | string? |
The text displayed in the text field. |
| Name | Type | Description |
|---|---|---|
| type | 'password' |
Indicates that the text field is a password type. |
| onPress | (value: string) => void |
A callback to be performed when the text field is pressed. |
- 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 guidelines
Anchor 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.