Universal international phone input with flag icons and country code sync.
npm install kiltelintl-tel-input (auto-loaded when enabled)
+), country_code (+), contact (html
`
> Kiltel auto-initializes on DOMContentLoaded.
> You can also call window.kiltelInit() manually if you inject HTML later (e.g., via AJAX).
---
HTML Markup (Required Structure)
> The main input and its two hidden fields must be inside a wrapper with class kiltel-phone-wrap.
> The block below is shown as-is in README (inside a fenced code block) so it renders exactly:
`html
type="tel"
class="form-control"
data-kilvish-tel
id="kilvishcontact"
name="full_contact"
placeholder="Enter mobile number"
data-kiltel-init="IT"
data-kiltel-validation="yes"
data-kilvish-only="IN,IT,US"
data-kilvish-preferred="IN"
required
readonly
value="+393381112223"
>
Prefilled/readonly for demo!
`
Notes
- The button.kiltel-country-trigger is either auto-created or you can place it manually (as above).
- For readonly demo, keep readonly and a sample value. For real forms, remove readonly.
---
Attributes Reference
| Attribute | Description | Example |
|---|---|---|
| data-kilvish-tel | Activates Kiltel for this input | (required) |
| data-kiltel-init | Initial country (ISO code) | "IT", "US", "IN" |
| data-kiltel-validation | Validates number (loads intl-tel-input automatically) | "yes" |
| data-kilvish-only | Show only these countries (comma-separated ISO codes) | "IN,US,IT" |
| data-kilvish-exclude | Exclude these countries from dropdown | "CN,RU" |
| data-kilvish-preferred | Pin these at top of list | "IN,US" |
Hidden fields inside .kiltel-phone-wrap
- — will contain + (e.g., +91)
- — will contain national digits (e.g., 1234567890)
---
What Gets Submitted
- Main input (name="full_contact" in the example) shows + (e.g., +911234567890).
- Hidden country_code → + (e.g., +91)
- Hidden contact → national number (e.g., 1234567890)
Kiltel keeps these in sync as the user types, pastes, or switches country.
---
Enable Validation (Optional)
Add data-kiltel-validation="yes" on the input to enable validation-on-blur.
Kiltel dynamically loads intl-tel-input@17.0.8 (and utils.js) — no extra tags needed.
- Unknown/invalid country code → shows "Unknown country code!"
- Invalid format for selected country → shows "Invalid phone number for
Error is written into an element with id kiltel-error if present; otherwise one is created next to the input wrapper.
---
Multiple Fields on the Same Page
Just repeat the wrapper block:
`html
`
Kiltel guards against double-initialization automatically.
---
React/SPA Usage
If the field is rendered after page load, call window.kiltelInit() once the DOM is updated:
`jsx
useEffect(() => {
// render phone input DOM first, then:
window.kiltelInit?.();
}, []);
`
For frameworks with virtual DOM, prefer uncontrolled inputs or refs; Kiltel manipulates the real input value (.value).
---
Styling & Theming
Kiltel ships with a minimalist CSS. Common hooks:
- .kiltel-phone-wrap — container (set position:relative in your form CSS if needed)
- .kiltel-country-trigger — flag/dropdown button
- .kiltel-country-list — popup list container
- .kiltel-country-option — each option (active option has .active)
- .kiltel-country-search — search input inside the dropdown
You can safely override sizes, fonts, borders, shadows, etc.
---
Accessibility
- Trigger is a real