react-formbridge
Browse documentation
Field buildersv1.0.2

field.tel()

Lightweight telephone string builder without country metadata.

  • Use it when you only need a basic phone text input with a tel keyboard
  • A built-in generic phone regex is wired through format(...) at construction time
  • For country-aware parsing, dial codes, E.164 output, or phone validation, use field.phone() instead
Tel.tsxtsx
1const schema = {
2 supportPhone: field.tel('Support phone')
3 .pattern(/^[+\d\s()-]{6,20}$/, 'Enter a valid phone.')
4 .required(),
5}

Defaults, inheritance & field methods

  • defaultValue is ''
  • type is tel
  • A built-in generic phone regex is wired through format(...) at construction time
  • For richer phone UX, use field.phone()
  • Shared methods: see Base field builder
  • String builder methods: see field.text()

Tel-specific methods:

MethodTypeDescription
--field.tel() does not add methods beyond the shared string-builder surface; it mainly preconfigures a generic phone format validator.

Recipes

Patterns that showcase tel-specific use cases.

Internal extension number

Extension.tsxtsx
1const schema = {
2 extension: field.tel('Extension')
3 .pattern(/^\d{3,5}$/, 'Enter a 3-5 digit extension.')
4 .placeholder('e.g. 4201'),
5}

Freeform with country code hint

SupportPhone.tsxtsx
1const schema = {
2 supportPhone: field.tel('Support phone')
3 .required()
4 .hint('Include country code, e.g. +33 1 23 45 67 89'),
5}

Custom format enforcement

Fax.tsxtsx
1const schema = {
2 fax: field.tel('Fax')
3 .pattern(
4 /^\+\d{1,3}\s?\d{4,14}$/,
5 'Use international format: +XX XXXXXXXXXX',
6 ),
7}