Phone — Fields | @saastro/forms

International phone input

Demo not found for field: phone

 /**
 * Phone Field Demo
 */
import { Form, FormBuilder } from '@saastro/forms';
import { FormProvider } from '@/components/FormProvider';
import { TooltipProvider } from '@/components/ui/tooltip';

const config = FormBuilder.create('phone-demo')
  .layout('manual')
  .columns(12)
  .addField('phone', (f) =>
    f
      .type('phone')
      .label('Phone number')
      .helperText('Select your country and enter your number')
      .placeholder('612 345 678')
      .prop('defaultCountry', 'US')
      .columns({ default: 12 }),
  )
  .addStep('main', ['phone'])
  .build();

export default function PhoneDemo() {
  const handleSubmit = (data: Record<string, unknown>) => {
    console.log('Form submitted:', data);
  };

  return (
    <TooltipProvider>
      <FormProvider>
        <Form config={config} onSubmit={handleSubmit} className="space-y-6" />
      </FormProvider>
    </TooltipProvider>
  );
} 

Overview

phone is a country <select> (ISO code + dial code) paired with a national-number <input type="tel">. The dial code and number are combined into a single E.164 value on every change.

This is distinct from a plain tel text field: phone manages the country prefix for you.

Value

The submitted value is a single E.164 string (valueKind: 'string'), e.g. "+34612345678". An existing E.164 value is best-effort parsed back to pre-fill the controls.

Usage

import { FormBuilder } from '@saastro/forms';

const config = FormBuilder.create('contact')
  .addField('phone', (f) =>
    f.type('phone').label('Phone number').prop('defaultCountry', 'US'),
  )
  .addStep('main', ['phone'])
  .build();

defaultCountry (and countries) have no fluent method — set them with .prop().

Props

Prop	Type	Default	Description
`defaultCountry`	`string`	`'US'`	ISO country code preselected
`countries`	`Array<{ code: string; dialCode: string; name: string }>`	bundled list	Override the selectable countries
`placeholder`	`string`	–	National-number input placeholder