PhoneInput

When to use

PhoneInput wraps react-phone-number-input with the design-system field chrome (FieldShell: label, status message, helper text and label-row actions) and token-based styling over the library's country selector and input. It formats as you type and emits the E.164 value (or undefined while incomplete) through onChange. The default country is FI; override defaultCountry per audience.

When not to use

• Do not bypass onChange and read the DOM input value; it is the display format, not the E.164 value.
• Do not use TextInput type=tel for international audiences; you lose country selection and normalization.

Look-alikes

• TextInput: Do not use TextInput type=tel for international audiences; you lose country selection and normalization.

Props

Variants

• Available sizes: sm, md, lg (default md). Forwarded to CSS module size classes.
• Allowed defaultCountry values: AC, AD, AE, AF, AG, AI, AL, AM, AO, AR, AS, AT, AU, AW, AX, AZ, BA, BB, BD, BE, BF, BG, BH, BI, BJ, BL, BM, BN, BO, BQ, BR, BS, BT, BW, BY, BZ, CA, CC, CD, CF, CG, CH, CI, CK, CL, CM, CN, CO, CR, CU, CV, CW, CX, CY, CZ, DE, DJ, DK, DM, DO, DZ, EC, EE, EG, EH, ER, ES, ET, FI, FJ, FK, FM, FO, FR, GA, GB, GD, GE, GF, GG, GH, GI, GL, GM, GN, GP, GQ, GR, GT, GU, GW, GY, HK, HN, HR, HT, HU, ID, IE, IL, IM, IN, IO, IQ, IR, IS, IT, JE, JM, JO, JP, KE, KG, KH, KI, KM, KN, KP, KR, KW, KY, KZ, LA, LB, LC, LI, LK, LR, LS, LT, LU, LV, LY, MA, MC, MD, ME, MF, MG, MH, MK, ML, MM, MN, MO, MP, MQ, MR, MS, MT, MU, MV, MW, MX, MY, MZ, NA, NC, NE, NF, NG, NI, NL, NO, NP, NR, NU, NZ, OM, PA, PE, PF, PG, PH, PK, PL, PM, PR, PS, PT, PW, PY, QA, RE, RO, RS, RU, RW, SA, SB, SC, SD, SE, SG, SH, SI, SJ, SK, SL, SM, SN, SO, SR, SS, ST, SV, SX, SY, SZ, TA, TC, TD, TG, TH, TJ, TK, TL, TM, TN, TO, TR, TT, TV, TW, TZ, UA, UG, US, UY, UZ, VA, VC, VE, VG, VI, VN, VU, WF, WS, XK, YE, YT, ZA, ZM, ZW (default FI).

Invalid combinations

The contract records no invalid combinations.

Keyboard

Rows marked (standard) name a key the contract lists without a description; the behaviour shown is the usual one for that key.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

Install and import

• Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
• Import: import { PhoneInput } from "@digitaltableteur/react";
• Entry point: @digitaltableteur/react/forms exports it too.
• Styles: import @digitaltableteur/react/style.css once at the app boundary.
• Also available as the custom element <dt-phone-input>; see the custom elements manifest.

Links

• Machine-readable contract (Design System Contract 1.0)
• Markdown version of this page
• Component index as JSON
• All components
• Source: The implementation lives in a private repository. This page, its Markdown twin and the contract are generated from it at build time and are the public source of truth.