PhoneField​

The PhoneField UI component is an input field designed for entering phone numbers with country codes.

Preview​

Code example​

render('Checkout::Dynamic::Render', () => {
  return <PhoneField label="Phone" value="1 (555) 555-5555" />;
});

PhoneFieldProps​

label​

The label of this field, which also serves as a placeholder when the field is empty.

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.

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.

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.

icon?​

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

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.

maxLength?​

The maximum number of characters allowed.

name?​

The name of the component.

readonly?​

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

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

required?​

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

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

This requirement adds semantic value to the field but does not automatically trigger an error. To display an error when the field is empty, use the error property.

value?​

The current value of the field. If this property is not set, the field is empty. Use the onChange callback to update this value.

areaCode?​

Specify an area code.

defaultAreaCode?​

The default area code.

defaultValue?​

The default value.

onChange?​

The callback triggered after a customer edits the field or selects a country.

onInput?​

The callback triggered when the customer changes anything in the field (including selecting a country from the dropdown).

onFocus?​

The callback triggered when the input is focused.

onBlur?​

The callback triggered when the focus is removed.

onKeyDown?​

The callback triggered upon a keyboard press.

Type descriptions​

Autocomplete​

AutocompleteGroup​

AutocompleteField​

Refer to autofill field.

IconSource​