Taxpayer Identification Number

[emetcalf-leadventure]

Expected Behavior

I would like to have an input field similar to SSN except it's the format of a TIN (XXX-XXXXXX).

Ideally I could pass to form.field a type="tin" and validations={['validTIN']}

Current Behavior

I can hide the value but the format is all numbers with dashes.

form.field("#tin", {
  type="text",
  maxLength: 9,
  inputMode: 'numeric',
  hideValue: true,
});

I can mask the value but then the value doesn't get hidden.

form.field("#tin", {
  type="text",
  inputMode: 'numeric',
  hideValue: true,
}).mask('999-999999', '*');

Possible Solution

I could at least do this myself if hideValue: true worked when there is a mask.

Context

Building a form that takes in TIN instead of SSN. It works with no dash but not as clear if the dash was present while inputing.

[flor-master]

Hi @emetcalf-leadventure unfortunately we don't have a native Tin field.
I see your issue and as a quick solution - I can suggest using the SSN field with a mask
Link to the demo: https://codesandbox.io/p/sandbox/collectjs-tin-field-show-hide-mask-6725f2?workspaceId=aa3ac769-4d1d-445c-afa9-29669766d966

Code example:

const form = VGSCollect.create("tnt53vgq99h", "sandbox", (state) => {});

const tin = form
  .field("#tin", {
    name: "tin",
    type: "ssn",
    validations: [ ... ],
    placeholder: "Taxpayer identification numbers",
  })
  .mask({
    mask: "999-999999",
    hideValue: false,
  });
let hidden = false;

document.getElementById("show-hide-button").addEventListener("click", (e) => {
  e.preventDefault();

  hidden = !hidden;
  tin.mask({
    mask: "999-999999",
    hideValue: hidden,
  });
});

[emetcalf-leadventure]

This is for TypeScript which has this issue that doesn't allow me to use mask as you are describing.