Phone

Accessible international phone input with country calling code. It submits a single normalized value to any native <form>.

In development

@teselia/phone is not published yet. Version 1.0.0 is planned for October 24, 2026. The demo below is an early build that only includes the number field. The country selector, validation and formatting are coming next. Scope and decisions: design document.

Demo

Submit the form empty to see native validation, type a number and submit again to see the value that reaches the server, or reset it.

Installation

npm

npm install @teselia/phone vue

pnpm

pnpm add @teselia/phone vue

CDN

<script src="https://cdn.jsdelivr.net/npm/@teselia/phone"></script>

The npm build keeps Vue as a peer dependency, so apps that already use Vue don't ship it twice. The CDN build bundles Vue and needs nothing else.

Usage

Importing the package registers the <tes-phone> element:

import '@teselia/phone'

<form>
  <tes-phone name="phone" label="Phone number" required></tes-phone>
  <button type="submit">Submit</button>
</form>

If tes-phone is already taken on your page, register it under another name:

import { define } from '@teselia/phone'

define('my-phone')

Accessibility

• The label attribute gives the field its visible label and accessible name. It is required.
• element.focus() and clicks on the label move focus to the input.
• It works with required, form reset and disabled fieldsets, like a native input.

The full accessibility specification, including the keyboard model of the country selector, is in the design document.