TextField​

The TextField UI component is used to obtain the customer's text input, such as a name, email address, or message.

Preview​

Code example​

render('Checkout::Dynamic::Render', () => {
  return <TextField label="Last name" />;
});

TextFieldProps​

label​

The field label, which is used as a placeholder when the field is empty.

id?​

A unique identifier for the UI component. If this property is not set, the system will automatically generate a globally unique ID for this component.

icon?​

The icon which is rendered at the beginning or end of the field.

name?​

The name of the UI component.

accessibilityDescription?​

A label for this component, used to help screen reader customers understand the function of the component. For more information, refer to Accessible description.

value?​

The current value of the field. If this property is not set, the field is empty.

type?​

The type of content that customers will enter.

required?​

Indicates whether the property needs a value. Valid values are:

• true: The field needs a value.
• false: The field does not need a value.

This property is intended to add semantic meaning but does not automatically trigger an error. To display an error when the property is empty, use the error property.

error?​

The error message displayed to the customer. If this property is configured, the component will be highlighted in red and show the error message.

multiline?​

Indicates whether the text field supports inputs of multiple lines. Set a number to define the default number of input lines.

autocomplete?​

The autocomplete attribute can be a boolean or an Autocomplete object, and it controls whether suggestions are shown for the field content. When set to true, the browser will use stored data to automatically fill the field; when set to false, the content will never be saved. Note that in some browsers, the autocomplete feature may not default to off, so do not overly rely on the default behavior when no value is provided. Alternatively, you can provide an Autocomplete object to specify particular data you want to be input in this field.

disabled?​

Indicates whether the field can be changed. Valid values are:

• true: Cannot be changed.
• false: Can be changed.

readonly?​

Indicates whether the field is read-only. Valid values are:

• true: The field is read-only.
• false: The field is editable.

maxLength?​

The maximum number of characters allowed.

onFocus?​

The callback triggered when the input is focused.

onBlur?​

The callback triggered when the focus is removed.

onChange?​

The callback triggered when the customer finishes editing the field.

onInput?​

The callback triggered when the customer makes any changes in the field.

Type descriptions​

Autocomplete​

AutocompleteGroup​

AutocompleteField​

Refer to autofill field.