Skip to content
Telixon

Getting started

@telixon/web-sdk is the DOM adapter for @telixon/core. It ships two headless widgets. PhoneInput drives a real <input> while RegionList feeds region pickers. Try both together in the input playground.

Install

Section titled “Install”
Terminal window
npm install @telixon/core @telixon/web-sdk

Your code imports both packages, since the engine loads through @telixon/core directly.

Load the engine

Section titled “Load the engine”

Creating PhoneInput or RegionList before the engine is loaded throws EngineNotReadyError:

import { ensureEngineReady } from '@telixon/core';


await ensureEngineReady();

Attach a phone input

Section titled “Attach a phone input”
import { createPhoneInput } from '@telixon/web-sdk';


const input = document.querySelector('input')!;


const phone = createPhoneInput({ mode: 'national', defaultRegion: 'US', input });


phone.subscribe((state) => {
  input.classList.toggle('invalid', state.validationError !== null);
});

Typing 4155550132 leaves the field showing (415) 555-0132; the class drops at the tenth digit. The last emitted state:

// {
//   value: '(415) 555-0132',
//   region: 'US',
//   selectionStart: 14,
//   selectionEnd: 14,
//   regionFilter: null,
//   numberTypeFilter: null,
//   placeholder: '(201) 555-0123',
//   validationError: null,
// }

List the regions

Section titled “List the regions”
import { createRegionList } from '@telixon/web-sdk';


const regions = createRegionList();


regions.getState().options[0];
// { region: 'AF', callingCode: '93', displayName: 'Afghanistan', data: undefined }

The guides Build a phone field, Build a region picker, and Build the complete field turn these into working fields with live demos.