Text Fieldcomponent
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.
Anchor to textfieldTextField
Use a text field to allow merchants to input or modify multiline text.
The content to use as the field label.
A button under the text field to provide extra functionality.
Whether the field can be modified.
Indicates an error to the user. The field is given specific stylistic treatment to communicate problems that have to be resolved immediately.
The label under the text field which provides guidance or instructions that assist users.
The maximum number of characters allowed in the input field.
The callback when focus is removed.
The callback when the user has finished editing a field.
The callback when input is focused.
Callback when the user makes any changes in the field. As noted in the documentation for , you must not use this to update
value
— use the callback for that purpose. Use the
prop when you need to do something as soon as the user makes a change, like clearing validation errors that apply to the field as soon as the user begins making the necessary adjustments.
A short hint that describes the expected value of the field.
Whether the field needs a value.
The current value for the field. Defaults to now. You should update this value in response to the callback.
Name Input
Preview

Anchor to guidelinesGuidelines
- 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).
Anchor to content-guidelinesContent 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.