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. All the country data needs to be provided by the user.

The countryOptions takes an array of object with following fields:

interface CountryPhoneOption {
  /**
   * A unique ID for the option.
   */
  id: string
  /**
   * URL pointing to the flag of the country.
   */
  flagUrl: string
  /**
   * Name of the country.
   */
  name: string
  /**
   * Phone number prefix.
   */
  prefix: string
  /**
   * Mask to format the number.
   */
  mask?: string
  /**
   * Example to show in the placeholder.
   */
  example: string
}

Phone number

+33

Open in Playroom

API

countryOptions

Required

All the countries with phone data.

CountryPhoneOption[]

selectedCountry

Required

ID of the selected country option.

CountryPhoneOption

onCountryChange

Required

Called when a different country is selected.

(selection: CountryPhoneOption) => void

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

onKeyDown

Action to perform when a key is pressed.

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

ref

Ref<HTMLInputElement>

key

Key | null