Svelte component

We now have our own Svelte component! You can view a full list of all supported props here. See the validation App for a demo of how to use the validation props. To run the demos yourself, follow the instructions in the Demo section of the readme.

Code

<script>
  import IntlTelInput from "intl-tel-input/svelteWithUtils";
  import "intl-tel-input/styles";

  const errorMap = [
    "Invalid number",
    "Invalid country code",
    "Too short",
    "Too long",
    "Invalid number",
  ];

  let isValid = $state(null);
  let number = $state(null);
  let errorCode = $state(null);
  let notice = $state(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    if (isValid) {
      notice = `Valid number: ${number}`;
    } else {
      const errorMessage = errorMap[errorCode || 0];
      notice = `Error: ${errorMessage}`;
    }
  };
</script>

<form onsubmit={handleSubmit}>
  <IntlTelInput
    onChangeNumber={(n) => (number = n)}
    onChangeValidity={(v) => (isValid = v)}
    onChangeErrorCode={(e) => (errorCode = e)}
    options={{
      initialCountry: "us",
      loadUtils: () => import("intl-tel-input/utils"),
    }}
  />
  <button class="button" type="submit">Validate</button>
  {#if notice}
    <div class="notice">{notice}</div>
  {/if}
</form>