Phone Input

Category: Form Inputs
Status: beta— new this release, what that means →
Platforms: ReactAvailable
AngularNot implemented yet · data display wave· package preview
SwiftUIComposition
Jetpack ComposeComposition
FlutterComposition
Verification details
What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.
React
Package maturity: stable · Implementation verification: Beta
Buildverified
Interactionverified
Accessibilityverified
RTLverified
Large textverified
Visualno evidence
Publishedverified
This platform’s whole catalogue is verified to React beta. The catalogue figure is the weakest component on that platform, not an average.
Install: ReactReact Setup →
npx @kinetixui/cli add phone-inputnpm i @kinetixui/ui @kinetixui/tokens@kinetixui/ui on npm @kinetixui/tokens on npm
The CLI copies React source. Usage imports from @kinetixui/ui require the npm package; for copied source, use your configured local import instead.
Angular · previewAngular Setup →
Not implemented yet · data display wave.
SwiftUISwiftUI Setup →
Composition · KinetixUI ships no SwiftUI component for this.
Jetpack ComposeJetpack Compose Setup →
Composition · KinetixUI ships no Jetpack Compose component for this.
FlutterFlutter Setup →
Composition · KinetixUI ships no Flutter component for this.
Registry: /r/phone-input.json
A11y: React: audited in CI →

An international phone number — a native calling-code select and a tel field in one left-to-right control — that keeps the displayed number apart from the raw value and does not pretend to validate.

Reduced motion: off · your browser setting

Mobile number

Sent to your server: —

React installation#

npx @kinetixui/cli add phone-input

React usage#

import { PhoneInput } from "@kinetixui/ui";
 
const [phone, setPhone] = React.useState({ country: "SA", national: "" });
 
<PhoneInput
  label="Mobile number"
  countries={[
    { code: "SA", name: "Saudi Arabia", callingCode: "966" },
    { code: "GB", name: "United Kingdom", callingCode: "44" },
  ]}
  value={phone}
  onValueChange={({ raw, ...next }) => {
    setPhone(next);
    // raw is "+966501234567": send it to your verification service
  }}
/>

Two values. national is the number as the reader typed it; raw is +, the calling code and the digits.
Paste. Pasting "+44 20 7946 0958" or "0044…" selects the country whose calling code matches and keeps the rest.
No validation and no numbering database. Whether a number is valid depends on numbering plans that change and on libraries of hundreds of kilobytes. Validate on your server, then show the result with invalid and aria-describedby. Trunk prefixes are not removed for the same reason.
Your list. No calling-code table is bundled; pass the countries you serve.

Accessibility and RTL#

The calling code is a real <select> named "Country code" (countryLabel), so it keeps the platform's keyboard behaviour and native picker. The number field is type="tel" with autocomplete="tel-national".
The control is dir="ltr" in every language, because a phone number is a left-to-right string; its label follows the page. An Arabic form shows "+966 50 123 4567", not a reversed number.
Checked in jsdom and Chromium; no screen reader run.

React API

The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.

This table is React-specific. The SwiftUI, Jetpack Compose, Flutter and Angular implementations share the design contract — the same variants, sizes, states and tokens — but each exposes its own idiomatic interface. Their real usage is in the platform tabs on the example above, not here.

PhoneInput

PhoneInput props
Prop	Type	Notes
labelrequired	React.ReactNodeThe field's visible label.	The field's visible label.
countriesrequired	PhoneCountry[]
valuerequired	PhoneValue
onValueChangerequired	(value: PhoneValue & { raw: string; }) => void`raw` is "+" + calling code + the number's digits ("" when there are no digits).	`raw` is "+" + calling code + the number's digits ("" when there are no digits).
countryLabel	stringAccessible name of the calling-code select. Default "Country code".	Accessible name of the calling-code select. Default "Country code".
invalid	booleanMarks both parts invalid; pair it with a visible message referenced by `aria-describedby`.	Marks both parts invalid; pair it with a visible message referenced by `aria-describedby`.

Form InputsNumber Input Form InputsRadio Group

Phone Input

Category

Form Inputs

Status

beta— new this release, what that means →

Platforms

ReactAvailable
AngularNot implemented yet · data display wave· package preview
SwiftUIComposition
Jetpack ComposeComposition
FlutterComposition

Verification details

What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.

React

Package maturity: stable · Implementation verification: Beta

Buildverified
Interactionverified
Accessibilityverified
RTLverified
Large textverified
Visualno evidence
Publishedverified

This platform’s whole catalogue is verified to React beta. The catalogue figure is the weakest component on that platform, not an average.

Install

ReactReact Setup →
npx @kinetixui/cli add phone-inputnpm i @kinetixui/ui @kinetixui/tokens@kinetixui/ui on npm @kinetixui/tokens on npm
The CLI copies React source. Usage imports from @kinetixui/ui require the npm package; for copied source, use your configured local import instead.
Angular · previewAngular Setup →
Not implemented yet · data display wave.
SwiftUISwiftUI Setup →
Composition · KinetixUI ships no SwiftUI component for this.
Jetpack ComposeJetpack Compose Setup →
Composition · KinetixUI ships no Jetpack Compose component for this.
FlutterFlutter Setup →
Composition · KinetixUI ships no Flutter component for this.

Registry

/r/phone-input.json

A11y

React: audited in CI →

Reduced motion: off · your browser setting

Mobile number

Sent to your server: —

React usage#

import { PhoneInput } from "@kinetixui/ui";
 
const [phone, setPhone] = React.useState({ country: "SA", national: "" });
 
<PhoneInput
  label="Mobile number"
  countries={[
    { code: "SA", name: "Saudi Arabia", callingCode: "966" },
    { code: "GB", name: "United Kingdom", callingCode: "44" },
  ]}
  value={phone}
  onValueChange={({ raw, ...next }) => {
    setPhone(next);
    // raw is "+966501234567": send it to your verification service
  }}
/>

Two values. national is the number as the reader typed it; raw is +, the calling code and the digits.

Paste. Pasting "+44 20 7946 0958" or "0044…" selects the country whose calling code matches and keeps the rest.

No validation and no numbering database. Whether a number is valid depends on numbering plans that change and on libraries of hundreds of kilobytes. Validate on your server, then show the result with invalid and aria-describedby. Trunk prefixes are not removed for the same reason.

Your list. No calling-code table is bundled; pass the countries you serve.

Accessibility and RTL#

The calling code is a real <select> named "Country code" (countryLabel), so it keeps the platform's keyboard behaviour and native picker. The number field is type="tel" with autocomplete="tel-national".

The control is dir="ltr" in every language, because a phone number is a left-to-right string; its label follows the page. An Arabic form shows "+966 50 123 4567", not a reversed number.

Checked in jsdom and Chromium; no screen reader run.

React API

The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.

PhoneInput

PhoneInput props
Prop	Type	Notes
labelrequired	React.ReactNodeThe field's visible label.	The field's visible label.
countriesrequired	PhoneCountry[]
valuerequired	PhoneValue
onValueChangerequired	(value: PhoneValue & { raw: string; }) => void`raw` is "+" + calling code + the number's digits ("" when there are no digits).	`raw` is "+" + calling code + the number's digits ("" when there are no digits).
countryLabel	stringAccessible name of the calling-code select. Default "Country code".	Accessible name of the calling-code select. Default "Country code".
invalid	booleanMarks both parts invalid; pair it with a visible message referenced by `aria-describedby`.	Marks both parts invalid; pair it with a visible message referenced by `aria-describedby`.