PhoneInput

The TkPhoneInput component allows users to input phone numbers with country selection and validation.

React

import { TkPhoneInput } from '@takeoff-ui/react'

Vue

import { TkPhoneInput } from '@takeoff-ui/vue'

Angular

import { TkPhoneInput } from '@takeoff-ui/angular'

Basic

A simple TkPhoneInput display.

View Code

React

<TkPhoneInput 
    label="Phone Input"
    hint="Hint text"
    placeholder="Placeholder text"
    value={value}
    onTkChange={(e) => setValue(e.detail)}
    />

Vue

<TkPhoneInput 
    label="Phone Input"
    hint="Hint text"
    placeholder="Placeholder text"
    v-model="value"
   />

Angular

<tk-phone-input  
    label="Phone Input"
    hint="Hint text"
    placeholder="Placeholder text"
    [(ngModel)]="value"
  />

Custom Country List

You can provide a custom list of countries to the phone input. This allows you to control which countries are available for selection in the dropdown.

  countryList=[
    { label: 'Azerbaijan', id: 'AZ', dialCode: '+994', mask: '99 999 99 99' },
    { label: 'Bolivia', id: 'BO', dialCode: '+591', mask: '99999999' },
    { label: 'Brazil', id: 'BR', dialCode: '+55', mask: '(99) 99999-9999' },
    { label: 'Japan', id: 'JP', dialCode: '+81', mask: '99-9999-9999' },
    { label: 'Portugal', id: 'PT', dialCode: '+351', mask: '999 999 999' },
    { label: 'Turkey', id: 'TR', dialCode: '+90', mask: '(999) 999 9999' }
  ]

View Code

React

<TkPhoneInput 
    label="Phone Input"
    showAsterisk={true}
    countryList={countryList}
    defaultCountry='AZ'
    value={value}
    onTkChange={(e) => setValue(e.detail)}
    />

Vue

<TkPhoneInput 
    label="Phone Input"
    :showAsterisk="true"
    :countryList="countryList"
    defaultCountry="AZ"
    v-model="value"
   />

Angular

<tk-phone-input  
    label="Phone Input"
    [showAsterisk]="true"
    [countryList]="countryList"
    defaultCountry="AZ"
    [(ngModel)]="value"
  />

Size

The "size" prop can be used with one of the sizes "small", "base", and "large". The default value is "base".

View Code

React

<TkPhoneInput
    label="Small Input"
    size="small"
    value={value}
    onTkChange={(e) => setValue(e.detail)}
  />
  <TkPhoneInput
    label="Base Input"
    size="base"
    value={value1}
    onTkChange={(e) => setValue1(e.detail)}
  />
  <TkPhoneInput
    label="Large Input"
    size="large"
    value={value2}
    onTkChange={(e) => setValue2(e.detail)}
  />

Vue

<TkPhoneInput
    label="Small Input"
    size="small"
    v-model="value"
  />
  <TkPhoneInput
    label="Base Input"
    size="base"
    v-model="value1"
  />
  <TkPhoneInput
    label="Large Input"
    size="large"
    v-model="value2"
  />

Angular

<tk-phone-input
    label="Small Input"
    size="small"
    [(ngModel)]="value"
  />
  <tk-phone-input
    label="Base Input"
    size="base"
    [(ngModel)]="value1"
  />
  <tk-phone-input
    label="Large Input"
    size="large"
    [(ngModel)]="value2"
  />

State

This example illustrates the disabled, readonly, and invalid states of the phone input field. Each state demonstrates how the input behaves and visually changes in different interaction scenarios.

View Code

React

<TkPhoneInput
    label="Error"
    placeholder="Error"
    invalid={true}
    error="This field is required"
  />
  <TkPhoneInput
    label="Readonly"
    placeholder="Readonly"
    readonly
  />
  <TkPhoneInput
    label="Disabled"
    placeholder="Disabled"
    disabled
  />

Vue

<TkPhoneInput
    label="Error"
    placeholder="Error"
    :invalid="true"
    error="This field is required"
  />
  <TkPhoneInput 
    label="Readonly" 
    placeholder="Readonly" 
    readonly 
  />
  <TkPhoneInput 
    label="Disabled" 
    placeholder="Disabled" 
    disabled 
  />

Angular

<tk-phone-input
    label="Error"
    placeholder="Error"
    [invalid]="true"
    error="This field is required"
  />
  <tk-phone-input
    label="Readonly"
    placeholder="Readonly"
    readonly
  />
  <tk-phone-input
    label="Disabled"
    placeholder="Disabled"
    disabled
  />

API

Props

Name	Type	Default	Description
	ICountry[]	null	The list of countries to display in the dropdown. Can be provided as an array of Country objects or as a JSON string.
	string	'TR'	The default country to select (ISO country code).
	boolean	false	Whether the input is disabled. *
	string	null	This is the error message that will be displayed.
	string	null	Provided a hint or additional information about the input.
	boolean	false	Indicates whether the input is in an invalid state
	string	null	The label for the phone input.
	string	null	Placeholder text for the phone input.
	boolean	false	If true, the user cannot modify the value.
	boolean	false	Displays a red asterisk (*) next to the label for visual emphasis.
	"base", "large", "small"	'base'	Sets size for the component.
	any	null	The value of the phone input. This is a list of phone input data objects. It can be mutable to allow two-way binding.

Events

Name	Description
tk-blur	Emitted when the input loses focus.
tk-change	Emitted when the value has changed.
tk-focus	Emitted when the input has focus.

Interfaces

Interface for the output data emitted by the phone input

interface IPhoneInputValue {
  /** The raw phone number without formatting */
  rawValue: string;
  /** The formatted phone number with mask applied */
  maskedValue: string;
  /** The selected country object */
  country: ICountry;
}

Interface representing a country for phone number input

interface ICountry {
  /** The display name of the country */
  label: string;
  /** The ISO country code */
  id: string;
  /** The international dialing code with + prefix */
  dialCode: string;
  /** The phone number mask pattern where 9 represents a digit */
  mask: string;
}