PhoneInput
v1.0.2Updated 22 Sept 2026Phone number field with the country dial code baked into the mask — Thailand `+66 XX XXX XXXX` by default, plus US, UK and Singapore formats. The prefix is fixed mask text rather than a separate overlay, so the accepted value always carries the full international number. Renders monospace tabular figures and sets inputMode="tel" and autoComplete="tel".
Preview
Live · 4 stories▸Why this is recommendedformmaskinputphone+5
PhoneInput — country formats.
- ✓Thai phone number entry
- ✓Collecting a mobile number at signup
- ✓Business or contact phone fields on a profile form
- ✓International phone entry for TH / US / UK / SG
- ✓Checkout delivery contact number
- Four country presets: TH (default), US, UK, SG
- Dial code embedded in the mask — never doubles up on pre-filled values
- Per-country placeholder showing a realistic example number
- inputMode="tel" + autoComplete="tel" for mobile keypads and autofill
- Monospace tabular-nums so digits do not jitter while typing
- Sanitised masked value via onAccept
- ✕Country selection with a flag dropdown and per-country validation (use ValidatedPhoneInput)
- ✕Countries outside TH / US / UK / SG
- ✕Free-form text (use Input)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
countryCountry mask preset (default 'TH')
—valueCurrent masked value including the dial code
—onAcceptFires whenever the masked value changes
—placeholderOverrides the country's example placeholder
—aria-invalidRenders the destructive border and ring
—disabledDisables the field; the value stays masked
—