diff --git a/packages/mint-components/src/components/sqm-input-field/sqm-input-field-view.tsx b/packages/mint-components/src/components/sqm-input-field/sqm-input-field-view.tsx
index 8002017109..bb3f1a976f 100644
--- a/packages/mint-components/src/components/sqm-input-field/sqm-input-field-view.tsx
+++ b/packages/mint-components/src/components/sqm-input-field/sqm-input-field-view.tsx
@@ -3,6 +3,10 @@ import jss from "jss";
import preset from "jss-preset-default";
import { intl } from "../../global/global";
import { ErrorStyles } from "../../global/mixins";
+import {
+ sensitiveMaskAttrs,
+ shouldMaskSensitiveField,
+} from "../../utils/posthogMasking";
import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
export interface InputFieldViewProps {
@@ -40,6 +44,9 @@ const styleString = sheet.toString();
export function InputFieldView(props: InputFieldViewProps) {
const { states, content } = props;
const validationErrors = states?.registrationFormState?.validationErrors;
+ const shouldMask =
+ content.fieldType === "tel" || shouldMaskSensitiveField(content.fieldName);
+ const maskAttrs = sensitiveMaskAttrs(shouldMask);
return (
@@ -52,6 +59,7 @@ export function InputFieldView(props: InputFieldViewProps) {
name={`/${content.fieldName}`}
type={content.fieldType}
label={content.fieldLabel}
+ {...maskAttrs}
{...(!content.fieldOptional ? { required: true } : [])}
disabled={
states.registrationFormState?.loading ||
diff --git a/packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx b/packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx
index 1426f18a1b..5b364727a3 100644
--- a/packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx
+++ b/packages/mint-components/src/components/sqm-name-fields/sqm-name-fields-view.tsx
@@ -1,6 +1,7 @@
import { h } from "@stencil/core";
import { ErrorStyles } from "../../global/mixins";
import { createStyleSheet } from "../../styling/JSS";
+import { sensitiveMaskAttrs } from "../../utils/posthogMasking";
import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
export interface NameFieldsViewProps {
@@ -67,6 +68,7 @@ const styleString = sheet.toString();
export function NameFieldsView(props: NameFieldsViewProps) {
const { states } = props;
const validationErrors = states?.registrationFormState?.validationErrors;
+ const maskAttrs = sensitiveMaskAttrs(true);
return (