diff --git a/apps/website/screens/components/text-input/code/examples/phoneNumberValidation.tsx b/apps/website/screens/components/text-input/code/examples/phoneNumberValidation.tsx
new file mode 100644
index 000000000..147bbfd63
--- /dev/null
+++ b/apps/website/screens/components/text-input/code/examples/phoneNumberValidation.tsx
@@ -0,0 +1,40 @@
+import { DxcTextInput, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, setValue] = useState("");
+ const [errorMessage, setErrorMessage] = useState();
+
+ const onChange = ({ value, error }) => {
+ setValue(value);
+ setErrorMessage(error == undefined ? "" : "Error onChange: invalid phone number");
+ };
+ const onBlur = ({ value, error }) => {
+ setValue(value);
+ setErrorMessage(error == undefined ? "" : "Error onBlur: invalid phone number");
+ };
+
+ const validPhoneNumber = new RegExp("^\\\\+[1-9]\\\\d{6,14}$");
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcTextInput,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx b/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx
index 0a3702153..f6757eb45 100644
--- a/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx
+++ b/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx
@@ -1,4 +1,4 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
+import { DxcParagraph, DxcBulletedList, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
import Figure from "@/common/Figure";
import DocFooter from "@/common/DocFooter";
@@ -9,6 +9,7 @@ import customAction from "./examples/customAction";
import anatomy from "./images/text_input_anatomy.png";
import textInputClearContent from "./images/text_input_clear_content.png";
import textInputAutosuggest from "./images/text_input_autosuggest.png";
+import phoneNumberValidation from "../code/examples/phoneNumberValidation";
const sections = [
{
@@ -323,6 +324,25 @@ const sections = [
),
},
+ {
+ title: "Phone Number Validation",
+ content: (
+ <>
+
+
+ Follow ITU-E.164 standards: when validating phone numbers, we recommend following the
+
+ ITU-E.164
+ {" "}
+ international standard and country-specific requirements. The standard defines phone numbers as a
+ country code followed by a national number, with a maximum of 15 digits in total.
+
+
+
+
+ >
+ ),
+ },
],
},
];