Hi Tanner,

The tecton input doesn't come with any builtin validation (see the docs for more info).

However, this allows the devs to validate it to match our use case using JS. You can use the format modifier to help the user identify the expectation as well. See format docs for more info on phone modifer. The modifier will handle the input limitations for you.

Here is an example of a validation function that you could write, if you are concerned the format modifier is not enough client side validation:

function verifyPhoneNumber(field) {
    const lengthValid = field.value.replace("/D/g", "").length >= 10 || field.value.length == 0;
    const errorMsg = "Phone number can't be more than 10 digits.";
    const errorSet = field.errors.includes(errorMsg);
    const invalidPhoneField = !lengthValid;

    if (invalidPhoneField && !errorSet) {
        field.errors.push(errorMsg);
    } else if (!invalidPhoneField && errorSet) {
        const elementToRemove = field.errors.indexOf(errorMsg);
        field.errors.splice(elementToRemove, 1);
    }
}
field = document.getElementById("phone");
field.addEventListener("input", function(event) {
		event.stopPropagation();
		this.value = event.detail.value;
		verifyPhoneNumber(this);
});

I hope that helps!