Homecomponentsinput

PhoneNumberField

A field to get a phone number.

The PhoneNumberField is used to get user input in a text field. It shares many features of the TextField component, so refer to its documentation.

This field has two interactive fields: a dropdown for country selection and a text field for phone number.

Phone number

06 12 34 56 78

Open in Playroom

API

defaultCountry

Required

CountryCode

onChange

Required

Called when the field's value is changed by the user.

(value: string) => void

name

Required

Name for the field.

string

value

Value of the text field.

string

size

Size of the field.

small

regular

textAlign

Aligns the text horizontally.

end

start

required

Indicates the field is required.

true

false

validationMessage

Action to perform when a key is pressed.

string

onKeyDown

Error message to display when the field was checked by external validator. Overrides default error message.

KeyboardEventHandler<HTMLInputElement>

onBlur

Action to perform when the field is blurred.

FocusEventHandler<HTMLInputElement>

ID of the field.

string

label

Adds a label to the field.

string

tip

Tooltip shown next to the label.

string

secondaryLabel

Adds a secondary label to the field.

ReactNode

description

Note shown below the field.

string

errorMessage

Displays an error message under the field.

string

disabled

Disables the field.

true

false

data

An object with the data keys and values.

DataAttributeMap