From bfd7e4ca470fae778d1c2a8aaa75b0d52361625e Mon Sep 17 00:00:00 2001
From: nooras <anoorasfatima@gmail.com>
Date: Sat, 19 Oct 2024 20:40:58 +0530
Subject: [PATCH] Add TextField component to the sistent components page #5948

---
 src/components/SistentNavigation/content.js   |  15 +
 .../sistent/components/text-field/code.js     |   8 +
 .../sistent/components/text-field/guidance.js |   8 +
 .../sistent/components/text-field/index.js    |   8 +
 .../Projects/Sistent/components/index.js      |   7 +
 .../components/text-field/code-block.js       |  19 +
 .../Sistent/components/text-field/code.js     | 747 ++++++++++++++++++
 .../Sistent/components/text-field/guidance.js | 201 +++++
 .../Sistent/components/text-field/index.js    | 412 ++++++++++
 9 files changed, 1425 insertions(+)
 create mode 100644 src/pages/projects/sistent/components/text-field/code.js
 create mode 100644 src/pages/projects/sistent/components/text-field/guidance.js
 create mode 100644 src/pages/projects/sistent/components/text-field/index.js
 create mode 100644 src/sections/Projects/Sistent/components/text-field/code-block.js
 create mode 100644 src/sections/Projects/Sistent/components/text-field/code.js
 create mode 100644 src/sections/Projects/Sistent/components/text-field/guidance.js
 create mode 100644 src/sections/Projects/Sistent/components/text-field/index.js

diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js
index 51f8f57618ae..34db2995ae3c 100644
--- a/src/components/SistentNavigation/content.js
+++ b/src/components/SistentNavigation/content.js
@@ -43,4 +43,19 @@ export const content = [
     link: "/projects/sistent/components/text-input/code",
     text: "Text Input",
   },
+  {
+    id: 15,
+    link: "/projects/sistent/components/text-field",
+    text: "Text Field",
+  },
+  {
+    id: 16,
+    link: "/projects/sistent/components/text-field/guidance",
+    text: "Text Field",
+  },
+  {
+    id: 17,
+    link: "/projects/sistent/components/text-field/code",
+    text: "Text Field",
+  },
 ];
diff --git a/src/pages/projects/sistent/components/text-field/code.js b/src/pages/projects/sistent/components/text-field/code.js
new file mode 100644
index 000000000000..ec4056851b3e
--- /dev/null
+++ b/src/pages/projects/sistent/components/text-field/code.js
@@ -0,0 +1,8 @@
+import React from "react";
+import { TextFieldCode } from "../../../../../sections/Projects/Sistent/components/text-field/code";
+
+const TextFieldCodePage = () => {
+  return <TextFieldCode />;
+};
+
+export default TextFieldCodePage;
diff --git a/src/pages/projects/sistent/components/text-field/guidance.js b/src/pages/projects/sistent/components/text-field/guidance.js
new file mode 100644
index 000000000000..a18f55ebb86b
--- /dev/null
+++ b/src/pages/projects/sistent/components/text-field/guidance.js
@@ -0,0 +1,8 @@
+import React from "react";
+import { TextFieldGuidance } from "../../../../../sections/Projects/Sistent/components/text-field/guidance";
+
+const TextFieldGuidancePage = () => {
+  return <TextFieldGuidance />;
+};
+
+export default TextFieldGuidancePage;
diff --git a/src/pages/projects/sistent/components/text-field/index.js b/src/pages/projects/sistent/components/text-field/index.js
new file mode 100644
index 000000000000..4031dd295f6d
--- /dev/null
+++ b/src/pages/projects/sistent/components/text-field/index.js
@@ -0,0 +1,8 @@
+import React from "react";
+import SistentTextField from "../../../../../sections/Projects/Sistent/components/text-field";
+
+const SistentTextFieldPage = () => {
+  return <SistentTextField />;
+};
+
+export default SistentTextFieldPage;
diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js
index 8bb294655b0f..f2afe5c521e1 100644
--- a/src/sections/Projects/Sistent/components/index.js
+++ b/src/sections/Projects/Sistent/components/index.js
@@ -30,6 +30,13 @@ const componentsData = [
       "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
     url: "/projects/sistent/components/modal",
   },
+  {
+    id: 4,
+    name: "Text Field",
+    description:
+      "The TextField component is a versatile input field used to capture user input in forms and user interfaces.",
+    url: "/projects/sistent/components/text-field",
+  }
 ];
 
 const SistentComponents = () => {
diff --git a/src/sections/Projects/Sistent/components/text-field/code-block.js b/src/sections/Projects/Sistent/components/text-field/code-block.js
new file mode 100644
index 000000000000..b3e4945c40e5
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/text-field/code-block.js
@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import Code from "../../../../../components/CodeBlock";
+export const CodeBlock = ({ name, code }) => {
+  const [showCode, setShowCode] = useState(false);
+  const onChange = () => {
+    setShowCode((prev) => !prev);
+  };
+  return (
+    <div className="show-code">
+      <input type="checkbox" name={name} id={name} onChange={onChange} />
+      <label htmlFor={name} className="label">
+        Show Code
+      </label>
+      {showCode && (
+        <Code codeString={code} language="javascript" />
+      )}
+    </div>
+  );
+};
diff --git a/src/sections/Projects/Sistent/components/text-field/code.js b/src/sections/Projects/Sistent/components/text-field/code.js
new file mode 100644
index 000000000000..25f1d0229d1d
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/text-field/code.js
@@ -0,0 +1,747 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import { Box, SistentThemeProvider, TextField } from "@layer5/sistent";
+import { CodeBlock } from "./code-block";
+import { SistentLayout } from "../../sistent-layout";
+
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const codes = [
+  `<Box
+    component="form"
+    sx={{ '& .MuiTextField-root': { m: 1, width: '25ch' } }}
+    noValidate
+    autoComplete="off"
+  >
+    <div>
+      <TextField
+        required
+        id="outlined-required"
+        label="Required"
+        defaultValue="Hello World"
+      />
+      <TextField
+        disabled
+        id="outlined-disabled"
+        label="Disabled"
+        defaultValue="Hello World"
+      />
+      <TextField
+        id="outlined-password-input"
+        label="Password"
+        type="password"
+        autoComplete="current-password"
+      />
+      <TextField
+        id="outlined-number"
+        label="Number"
+        type="number"
+      />
+      <TextField id="outlined-search" label="Search field" type="search" />
+      <TextField
+        id="outlined-helperText"
+        label="Helper text"
+        defaultValue="Default Value"
+        helperText="Some important text"
+      />
+    </div>
+    <div>
+      <TextField
+        required
+        id="filled-required"
+        label="Required"
+        defaultValue="Hello World"
+        variant="filled"
+      />
+      <TextField
+        disabled
+        id="filled-disabled"
+        label="Disabled"
+        defaultValue="Hello World"
+        variant="filled"
+      />
+      <TextField
+        id="filled-password-input"
+        label="Password"
+        type="password"
+        autoComplete="current-password"
+        variant="filled"
+      />
+      <TextField
+        id="filled-number"
+        label="Number"
+        type="number"
+        variant="filled"
+      />
+      <TextField
+        id="filled-search"
+        label="Search field"
+        type="search"
+        variant="filled"
+      />
+      <TextField
+        id="filled-helperText"
+        label="Helper text"
+        defaultValue="Default Value"
+        helperText="Some important text"
+        variant="filled"
+      />
+    </div>
+    <div>
+      <TextField
+        required
+        id="standard-required"
+        label="Required"
+        defaultValue="Hello World"
+        variant="standard"
+      />
+      <TextField
+        disabled
+        id="standard-disabled"
+        label="Disabled"
+        defaultValue="Hello World"
+        variant="standard"
+      />
+      <TextField
+        id="standard-password-input"
+        label="Password"
+        type="password"
+        autoComplete="current-password"
+        variant="standard"
+      />
+      <TextField
+        id="standard-number"
+        label="Number"
+        type="number"
+        variant="standard"
+      />
+      <TextField
+        id="standard-search"
+        label="Search field"
+        type="search"
+        variant="standard"
+      />
+      <TextField
+        id="standard-helperText"
+        label="Helper text"
+        defaultValue="Default Value"
+        helperText="Some important text"
+        variant="standard"
+      />
+    </div>
+  </Box>`,
+  `  <Box
+      component="form"
+      sx={{ '& .MuiTextField-root': { m: 1, width: '25ch' } }}
+      noValidate
+      autoComplete="off"
+    >
+      <div>
+        <TextField
+          error
+          id="outlined-error"
+          label="Error"
+          defaultValue="Hello World"
+        />
+        <TextField
+          error
+          id="outlined-error-helper-text"
+          label="Error"
+          defaultValue="Hello World"
+          helperText="Incorrect entry."
+        />
+      </div>
+      <div>
+        <TextField
+          error
+          id="filled-error"
+          label="Error"
+          defaultValue="Hello World"
+          variant="filled"
+        />
+        <TextField
+          error
+          id="filled-error-helper-text"
+          label="Error"
+          defaultValue="Hello World"
+          helperText="Incorrect entry."
+          variant="filled"
+        />
+      </div>
+      <div>
+        <TextField
+          error
+          id="standard-error"
+          label="Error"
+          defaultValue="Hello World"
+          variant="standard"
+        />
+        <TextField
+          error
+          id="standard-error-helper-text"
+          label="Error"
+          defaultValue="Hello World"
+          helperText="Incorrect entry."
+          variant="standard"
+        />
+      </div>
+    </Box>`,
+  `  <Box
+      component="form"
+      sx={{ '& .MuiTextField-root': { m: 1, width: '25ch' } }}
+      noValidate
+      autoComplete="off"
+    >
+      <div>
+        <TextField
+          id="outlined-multiline-flexible"
+          label="Multiline"
+          multiline
+          maxRows={4}
+        />
+        <TextField
+          id="outlined-textarea"
+          label="Multiline Placeholder"
+          placeholder="Placeholder"
+          multiline
+        />
+        <TextField
+          id="outlined-multiline-static"
+          label="Multiline"
+          multiline
+          rows={4}
+          defaultValue="Default Value"
+        />
+      </div>
+      <div>
+        <TextField
+          id="filled-multiline-flexible"
+          label="Multiline"
+          multiline
+          maxRows={4}
+          variant="filled"
+        />
+        <TextField
+          id="filled-textarea"
+          label="Multiline Placeholder"
+          placeholder="Placeholder"
+          multiline
+          variant="filled"
+        />
+        <TextField
+          id="filled-multiline-static"
+          label="Multiline"
+          multiline
+          rows={4}
+          defaultValue="Default Value"
+          variant="filled"
+        />
+      </div>
+      <div>
+        <TextField
+          id="standard-multiline-flexible"
+          label="Multiline"
+          multiline
+          maxRows={4}
+          variant="standard"
+        />
+        <TextField
+          id="standard-textarea"
+          label="Multiline Placeholder"
+          placeholder="Placeholder"
+          multiline
+          variant="standard"
+        />
+        <TextField
+          id="standard-multiline-static"
+          label="Multiline"
+          multiline
+          rows={4}
+          defaultValue="Default Value"
+          variant="standard"
+        />
+      </div>
+    </Box>`,
+  `  <Box
+      component="form"
+      sx={{ '& .MuiTextField-root': { m: 1, width: '25ch' } }}
+      noValidate
+      autoComplete="off"
+    >
+      <div>
+        <TextField
+          label="Size"
+          id="outlined-size-small"
+          defaultValue="Small"
+          size="small"
+        />
+        <TextField label="Size" id="outlined-size-normal" defaultValue="Normal" />
+      </div>
+      <div>
+        <TextField
+          label="Size"
+          id="filled-size-small"
+          defaultValue="Small"
+          variant="filled"
+          size="small"
+        />
+        <TextField
+          label="Size"
+          id="filled-size-normal"
+          defaultValue="Normal"
+          variant="filled"
+        />
+      </div>
+      <div>
+        <TextField
+          label="Size"
+          id="standard-size-small"
+          defaultValue="Small"
+          size="small"
+          variant="standard"
+        />
+        <TextField
+          label="Size"
+          id="standard-size-normal"
+          defaultValue="Normal"
+          variant="standard"
+        />
+      </div>
+    </Box>`,
+  ` <Box sx={{ width: 600, maxWidth: '100%' }}>
+      <TextField fullWidth label="fullWidth" id="fullWidth" />
+  </Box>`,
+];
+
+export const TextFieldCode = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="TextField" >
+      <div className="content">
+        <a id="Identity">
+          <h2>TextField</h2>
+        </a>
+        <p>
+          The TextField component is a versatile input field used to capture user input in forms and user interfaces. It can handle a variety of input types, such as text, numbers, emails, and passwords, and offers built-in styling and validation features.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/text-field"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/text-field")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+                "/projects/sistent/components/text-field/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/text-field/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/text-field/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/identity/color/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            A TextField allow user to enter and edit any text. It mostly present in Forms or dialogue box in UI.
+            TextField are crucial and integral elements in an interface. It allows to get data from enetered user.
+          </p>
+          <a id="Form Props">
+            <h2>Form Props</h2>
+          </a>
+          <p>
+            Standard form attributes are supported, for example required, disabled, type, etc.
+            HelperText attributes is used to give context about a field's input,
+            such as how the input will be used.
+          </p>
+          <div className="showcase">
+            <div className="tf-items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Box
+                  component="form"
+                  sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
+                  noValidate
+                  autoComplete="off"
+                >
+                  <div>
+                    <TextField
+                      required
+                      id="outlined-required"
+                      label="Required"
+                      defaultValue="Hello World"
+                    />
+                    <TextField
+                      disabled
+                      id="outlined-disabled"
+                      label="Disabled"
+                      defaultValue="Hello World"
+                    />
+                    <TextField
+                      id="outlined-password-input"
+                      label="Password"
+                      type="password"
+                      autoComplete="current-password"
+                    />
+                    <TextField
+                      id="outlined-number"
+                      label="Number"
+                      type="number"
+                    />
+                    <TextField id="outlined-search" label="Search field" type="search" />
+                    <TextField
+                      id="outlined-helperText"
+                      label="Helper text"
+                      defaultValue="Default Value"
+                      helperText="Some important text"
+                    />
+                  </div>
+                  <div>
+                    <TextField
+                      required
+                      id="filled-required"
+                      label="Required"
+                      defaultValue="Hello World"
+                      variant="filled"
+                    />
+                    <TextField
+                      disabled
+                      id="filled-disabled"
+                      label="Disabled"
+                      defaultValue="Hello World"
+                      variant="filled"
+                    />
+                    <TextField
+                      id="filled-password-input"
+                      label="Password"
+                      type="password"
+                      autoComplete="current-password"
+                      variant="filled"
+                    />
+                    <TextField
+                      id="filled-number"
+                      label="Number"
+                      type="number"
+                      variant="filled"
+                    />
+                    <TextField
+                      id="filled-search"
+                      label="Search field"
+                      type="search"
+                      variant="filled"
+                    />
+                    <TextField
+                      id="filled-helperText"
+                      label="Helper text"
+                      defaultValue="Default Value"
+                      helperText="Some important text"
+                      variant="filled"
+                    />
+                  </div>
+                  <div>
+                    <TextField
+                      required
+                      id="standard-required"
+                      label="Required"
+                      defaultValue="Hello World"
+                      variant="standard"
+                    />
+                    <TextField
+                      disabled
+                      id="standard-disabled"
+                      label="Disabled"
+                      defaultValue="Hello World"
+                      variant="standard"
+                    />
+                    <TextField
+                      id="standard-password-input"
+                      label="Password"
+                      type="password"
+                      autoComplete="current-password"
+                      variant="standard"
+                    />
+                    <TextField
+                      id="standard-number"
+                      label="Number"
+                      type="number"
+                      variant="standard"
+                    />
+                    <TextField
+                      id="standard-search"
+                      label="Search field"
+                      type="search"
+                      variant="standard"
+                    />
+                    <TextField
+                      id="standard-helperText"
+                      label="Helper text"
+                      defaultValue="Default Value"
+                      helperText="Some important text"
+                      variant="standard"
+                    />
+                  </div>
+                </Box>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="form-props" code={codes[0]} />
+          </div>
+          <a id="Validation">
+            <h2>Validation</h2>
+          </a>
+          <p>
+            The error property toggles the error state. The helperText prop can then be used to provide feedback to the user about the error. As shown below it can be used with variant such as outlined (default), filled, and standard.
+          </p>
+          <div className="showcase">
+            <div className="tf-items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Box
+                  component="form"
+                  sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
+                  noValidate
+                  autoComplete="off"
+                >
+                  <div>
+                    <TextField
+                      error
+                      id="outlined-error"
+                      label="Error"
+                      defaultValue="Hello World"
+                    />
+                    <TextField
+                      error
+                      id="outlined-error-helper-text"
+                      label="Error"
+                      defaultValue="Hello World"
+                      helperText="Incorrect entry."
+                    />
+                  </div>
+                  <div>
+                    <TextField
+                      error
+                      id="filled-error"
+                      label="Error"
+                      defaultValue="Hello World"
+                      variant="filled"
+                    />
+                    <TextField
+                      error
+                      id="filled-error-helper-text"
+                      label="Error"
+                      defaultValue="Hello World"
+                      helperText="Incorrect entry."
+                      variant="filled"
+                    />
+                  </div>
+                  <div>
+                    <TextField
+                      error
+                      id="standard-error"
+                      label="Error"
+                      defaultValue="Hello World"
+                      variant="standard"
+                    />
+                    <TextField
+                      error
+                      id="standard-error-helper-text"
+                      label="Error"
+                      defaultValue="Hello World"
+                      helperText="Incorrect entry."
+                      variant="standard"
+                    />
+                  </div>
+                </Box>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="validation" code={codes[0]} />
+          </div>
+          <a id="Multiline">
+            <h2>Multiline</h2>
+          </a>
+          <p>
+            The multiline prop transforms the text field into a TextareaAutosize element. Unless the rows prop is set, the height of the text field dynamically matches its content (using TextareaAutosize). You can use the minRows and maxRows props to bound it.
+          </p>
+          <div className="showcase">
+            <div className="tf-items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Box
+                  component="form"
+                  sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
+                  noValidate
+                  autoComplete="off"
+                >
+                  <div>
+                    <TextField
+                      id="outlined-multiline-flexible"
+                      label="Multiline"
+                      multiline
+                      maxRows={4}
+                    />
+                    <TextField
+                      id="outlined-textarea"
+                      label="Multiline Placeholder"
+                      placeholder="Placeholder"
+                      multiline
+                    />
+                    <TextField
+                      id="outlined-multiline-static"
+                      label="Multiline"
+                      multiline
+                      rows={4}
+                      defaultValue="Default Value"
+                    />
+                  </div>
+                  <div>
+                    <TextField
+                      id="filled-multiline-flexible"
+                      label="Multiline"
+                      multiline
+                      maxRows={4}
+                      variant="filled"
+                    />
+                    <TextField
+                      id="filled-textarea"
+                      label="Multiline Placeholder"
+                      placeholder="Placeholder"
+                      multiline
+                      variant="filled"
+                    />
+                    <TextField
+                      id="filled-multiline-static"
+                      label="Multiline"
+                      multiline
+                      rows={4}
+                      defaultValue="Default Value"
+                      variant="filled"
+                    />
+                  </div>
+                  <div>
+                    <TextField
+                      id="standard-multiline-flexible"
+                      label="Multiline"
+                      multiline
+                      maxRows={4}
+                      variant="standard"
+                    />
+                    <TextField
+                      id="standard-textarea"
+                      label="Multiline Placeholder"
+                      placeholder="Placeholder"
+                      multiline
+                      variant="standard"
+                    />
+                    <TextField
+                      id="standard-multiline-static"
+                      label="Multiline"
+                      multiline
+                      rows={4}
+                      defaultValue="Default Value"
+                      variant="standard"
+                    />
+                  </div>
+                </Box>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="multi-line" code={codes[2]} />
+          </div>
+          <a id="Sizes">
+            <h2>Sizes</h2>
+          </a>
+          <p>
+            TextField can have small or normal field sizes. According the requirement it can be adjusted.
+          </p>
+          <div className="showcase">
+            <div className="tf-items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Box
+                  component="form"
+                  sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
+                  noValidate
+                  autoComplete="off"
+                >
+                  <div>
+                    <TextField
+                      label="Size"
+                      id="outlined-size-small"
+                      defaultValue="Small"
+                      size="small"
+                    />
+                    <TextField label="Size" id="outlined-size-normal" defaultValue="Normal" />
+                  </div>
+                  <div>
+                    <TextField
+                      label="Size"
+                      id="filled-size-small"
+                      defaultValue="Small"
+                      variant="filled"
+                      size="small"
+                    />
+                    <TextField
+                      label="Size"
+                      id="filled-size-normal"
+                      defaultValue="Normal"
+                      variant="filled"
+                    />
+                  </div>
+                  <div>
+                    <TextField
+                      label="Size"
+                      id="standard-size-small"
+                      defaultValue="Small"
+                      size="small"
+                      variant="standard"
+                    />
+                    <TextField
+                      label="Size"
+                      id="standard-size-normal"
+                      defaultValue="Normal"
+                      variant="standard"
+                    />
+                  </div>
+                </Box>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="sizes" code={codes[3]} />
+          </div>
+          <a id="Full Width">
+            <h2>Full Width</h2>
+          </a>
+          <p>
+            FullWidth attribute can be used to make the input take up the full width of its container.
+          </p>
+          <div className="showcase">
+            <div className="tf-items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Box sx={{ width: 600, maxWidth: "100%" }}>
+                  <TextField fullWidth label="fullWidth" id="fullWidth" />
+                </Box>
+              </SistentThemeProvider>
+            </div>
+
+            <CodeBlock name="filled-button" code={codes[4]} />
+          </div>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+
diff --git a/src/sections/Projects/Sistent/components/text-field/guidance.js b/src/sections/Projects/Sistent/components/text-field/guidance.js
new file mode 100644
index 000000000000..516790eb08fd
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/text-field/guidance.js
@@ -0,0 +1,201 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import { Box, SistentThemeProvider, TextField } from "@layer5/sistent";
+import { SistentLayout } from "../../sistent-layout";
+
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+export const TextFieldGuidance = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="TextField">
+      <div className="content">
+        <a id="Identity">
+          <h2>TextField</h2>
+        </a>
+        <p>
+          The TextField component is a versatile input field used to capture user input in forms and user interfaces. It can handle a variety of input types, such as text, numbers, emails, and passwords, and offers built-in styling and validation features.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/text-field"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/text-field")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+                "/projects/sistent/components/text-field/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/text-field/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/text-field/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/text-field/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            For proper application, these TextField can be used for different
+            purposes. It can be effectively used in any project to increase User Interaction.
+            Lets see how can we use TextField effectively in our project.
+          </p>
+          <a id="Basic TextField">
+            <h2>Basic TextField</h2>
+          </a>
+          <p>
+            The TextField wrapper component is a complete form control including a label, variant, helper text etc. TextField comes with three variants: outlined (default), filled, and standard.
+          </p>
+          <h3>Outlined (default)</h3>
+          <p>
+            Outlined TextField are TextField that do not have a fill, but have a
+            border or stroke to define its bounding box as well as a text label
+            to convey a thought for users to take action upon. Colors can also
+            be used to style these buttons in order to fit into the theme align
+            with brand guidelines.
+          </p>
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <Box
+              component="form"
+              sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
+              noValidate
+              autoComplete="off"
+            >
+              <TextField id="outlined-basic" label="Outlined" variant="outlined" />
+            </Box>
+          </SistentThemeProvider>
+          <h3>Filled</h3>
+          <p>
+            Filled TextField are TextField that consist a background color fill and
+            a text in it. Depending on the theme or intended action, the color
+            fill can range from a primary brand color to any other applicable
+            color in a brand’s color palette.
+          </p>
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <Box
+              component="form"
+              sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
+              noValidate
+              autoComplete="off"
+            >
+              <TextField variant="filled" label="Filled" id="filled-basic" />
+            </Box>
+          </SistentThemeProvider>
+          <h3>Standard</h3>
+          <p>
+            Standard TextField are TextField that do not have background color fill and
+            a text in it. Colors can also be used to style these buttons in order to fit
+            into the theme align with brand guidelines.
+          </p>
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <Box
+              component="form"
+              sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
+              noValidate
+              autoComplete="off"
+            >
+              <TextField id="standard-basic" label="Standard" variant="standard" />
+            </Box>
+          </SistentThemeProvider>
+          <a id="When to use different properties?">
+            <h2>When to use different properties?</h2>
+          </a>
+          <p>
+            You might come across in a situation you needed some helper text, field with number, disabled field etc. Let's see different properties availble for TextField.
+          </p>
+          <h3>Type prop</h3>
+          <p>
+            Type prop can have a value such as password, number or text.
+          </p>
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <Box
+              component="form"
+              sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
+              noValidate
+              autoComplete="off"
+            >
+              <div>
+                <TextField
+                  id="outlined-password-input"
+                  label="Password"
+                  type="password"
+                  autoComplete="current-password"
+                />
+                <TextField
+                  id="outlined-number"
+                  label="Number"
+                  type="number"
+                />
+                <TextField
+                  id="outlined-text"
+                  label="Text"
+                  type="text"
+                />
+              </div>
+            </Box>
+          </SistentThemeProvider>
+          <h3>Helper Text</h3>
+          <p>
+            Helper text also very effective for your form or for better understanding.
+          </p>
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <Box
+              component="form"
+              sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
+              noValidate
+              autoComplete="off"
+            >
+              <div>
+                <TextField
+                  id="outlined-text"
+                  label="Text"
+                  type="text"
+                  helperText="This is helper text"
+                />
+              </div>
+            </Box>
+          </SistentThemeProvider>
+          <h3>Error</h3>
+          <p>
+            Error handling is very important for UI. User might come in sitatution where they enter invalid value or forget to enter any data in TextField. Here come error prop helps to indicate partucular field are required or user have entered invalid value.
+          </p>
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <Box
+              component="form"
+              sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
+              noValidate
+              autoComplete="off"
+            >
+              <div>
+                <TextField
+                  error
+                  id="outlined-error"
+                  label="Error"
+                  defaultValue="Hello World"
+                />
+              </div>
+            </Box>
+          </SistentThemeProvider>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
diff --git a/src/sections/Projects/Sistent/components/text-field/index.js b/src/sections/Projects/Sistent/components/text-field/index.js
new file mode 100644
index 000000000000..d89a3e043fc6
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/text-field/index.js
@@ -0,0 +1,412 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import { Box, SistentThemeProvider, TextField } from "@layer5/sistent";
+import TabButton from "../../../../../reusecore/Button";
+import { SistentLayout } from "../../sistent-layout";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const SistentTextField = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="TextField" >
+      <div className="content">
+        <a id="Identity">
+          <h2>TextField</h2>
+        </a>
+        <p>
+          The TextField component is a versatile input field used to capture user input in forms and user interfaces. It can handle a variety of input types, such as text, numbers, emails, and passwords, and offers built-in styling and validation features.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/text-field"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/text-field")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+                "/projects/sistent/components/text-field/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/text-field/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/text-field/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/text-field/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            A Text fileds allow user to enter and edit any text. It mostly present in Forms or dialogue box in UI.
+            TextField are crucial and integral elements in an interface. It allows to get data from enetered user.
+          </p>
+          <a id="Form Props">
+            <h2>Form Props</h2>
+          </a>
+          <p>
+            Standard form attributes are supported, for example required, disabled, type, etc.
+            HelperText attributes is used to give context about a field's input,
+            such as how the input will be used.
+          </p>
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <Box
+              component="form"
+              sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
+              noValidate
+              autoComplete="off"
+            >
+              <div>
+                <TextField
+                  required
+                  id="outlined-required"
+                  label="Required"
+                  defaultValue="Hello World"
+                />
+                <TextField
+                  disabled
+                  id="outlined-disabled"
+                  label="Disabled"
+                  defaultValue="Hello World"
+                />
+                <TextField
+                  id="outlined-password-input"
+                  label="Password"
+                  type="password"
+                  autoComplete="current-password"
+                />
+                <TextField
+                  id="outlined-number"
+                  label="Number"
+                  type="number"
+                />
+                <TextField id="outlined-search" label="Search field" type="search" />
+                <TextField
+                  id="outlined-helperText"
+                  label="Helper text"
+                  defaultValue="Default Value"
+                  helperText="Some important text"
+                />
+              </div>
+              <div>
+                <TextField
+                  required
+                  id="filled-required"
+                  label="Required"
+                  defaultValue="Hello World"
+                  variant="filled"
+                />
+                <TextField
+                  disabled
+                  id="filled-disabled"
+                  label="Disabled"
+                  defaultValue="Hello World"
+                  variant="filled"
+                />
+                <TextField
+                  id="filled-password-input"
+                  label="Password"
+                  type="password"
+                  autoComplete="current-password"
+                  variant="filled"
+                />
+                <TextField
+                  id="filled-number"
+                  label="Number"
+                  type="number"
+                  variant="filled"
+                />
+                <TextField
+                  id="filled-search"
+                  label="Search field"
+                  type="search"
+                  variant="filled"
+                />
+                <TextField
+                  id="filled-helperText"
+                  label="Helper text"
+                  defaultValue="Default Value"
+                  helperText="Some important text"
+                  variant="filled"
+                />
+              </div>
+              <div>
+                <TextField
+                  required
+                  id="standard-required"
+                  label="Required"
+                  defaultValue="Hello World"
+                  variant="standard"
+                />
+                <TextField
+                  disabled
+                  id="standard-disabled"
+                  label="Disabled"
+                  defaultValue="Hello World"
+                  variant="standard"
+                />
+                <TextField
+                  id="standard-password-input"
+                  label="Password"
+                  type="password"
+                  autoComplete="current-password"
+                  variant="standard"
+                />
+                <TextField
+                  id="standard-number"
+                  label="Number"
+                  type="number"
+                  variant="standard"
+                />
+                <TextField
+                  id="standard-search"
+                  label="Search field"
+                  type="search"
+                  variant="standard"
+                />
+                <TextField
+                  id="standard-helperText"
+                  label="Helper text"
+                  defaultValue="Default Value"
+                  helperText="Some important text"
+                  variant="standard"
+                />
+              </div>
+            </Box>
+          </SistentThemeProvider>
+          <a id="Validation">
+            <h2>Validation</h2>
+          </a>
+          <p>
+            The error property toggles the error state. The helperText prop can then be used to provide feedback to the user about the error. As shown below it can be used with variant such as outlined (default), filled, and standard.
+          </p>
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <Box
+              component="form"
+              sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
+              noValidate
+              autoComplete="off"
+            >
+              <div>
+                <TextField
+                  error
+                  id="outlined-error"
+                  label="Error"
+                  defaultValue="Hello World"
+                />
+                <TextField
+                  error
+                  id="outlined-error-helper-text"
+                  label="Error"
+                  defaultValue="Hello World"
+                  helperText="Incorrect entry."
+                />
+              </div>
+              <div>
+                <TextField
+                  error
+                  id="filled-error"
+                  label="Error"
+                  defaultValue="Hello World"
+                  variant="filled"
+                />
+                <TextField
+                  error
+                  id="filled-error-helper-text"
+                  label="Error"
+                  defaultValue="Hello World"
+                  helperText="Incorrect entry."
+                  variant="filled"
+                />
+              </div>
+              <div>
+                <TextField
+                  error
+                  id="standard-error"
+                  label="Error"
+                  defaultValue="Hello World"
+                  variant="standard"
+                />
+                <TextField
+                  error
+                  id="standard-error-helper-text"
+                  label="Error"
+                  defaultValue="Hello World"
+                  helperText="Incorrect entry."
+                  variant="standard"
+                />
+              </div>
+            </Box>
+          </SistentThemeProvider>
+          <a id="Multiline">
+            <h2>Multiline</h2>
+          </a>
+          <p>
+            The multiline prop transforms the text field into a TextareaAutosize element. Unless the rows prop is set, the height of the text field dynamically matches its content (using TextareaAutosize). You can use the minRows and maxRows props to bound it.
+          </p>
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <Box
+              component="form"
+              sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
+              noValidate
+              autoComplete="off"
+            >
+              <div>
+                <TextField
+                  id="outlined-multiline-flexible"
+                  label="Multiline"
+                  multiline
+                  maxRows={4}
+                />
+                <TextField
+                  id="outlined-textarea"
+                  label="Multiline Placeholder"
+                  placeholder="Placeholder"
+                  multiline
+                />
+                <TextField
+                  id="outlined-multiline-static"
+                  label="Multiline"
+                  multiline
+                  rows={4}
+                  defaultValue="Default Value"
+                />
+              </div>
+              <div>
+                <TextField
+                  id="filled-multiline-flexible"
+                  label="Multiline"
+                  multiline
+                  maxRows={4}
+                  variant="filled"
+                />
+                <TextField
+                  id="filled-textarea"
+                  label="Multiline Placeholder"
+                  placeholder="Placeholder"
+                  multiline
+                  variant="filled"
+                />
+                <TextField
+                  id="filled-multiline-static"
+                  label="Multiline"
+                  multiline
+                  rows={4}
+                  defaultValue="Default Value"
+                  variant="filled"
+                />
+              </div>
+              <div>
+                <TextField
+                  id="standard-multiline-flexible"
+                  label="Multiline"
+                  multiline
+                  maxRows={4}
+                  variant="standard"
+                />
+                <TextField
+                  id="standard-textarea"
+                  label="Multiline Placeholder"
+                  placeholder="Placeholder"
+                  multiline
+                  variant="standard"
+                />
+                <TextField
+                  id="standard-multiline-static"
+                  label="Multiline"
+                  multiline
+                  rows={4}
+                  defaultValue="Default Value"
+                  variant="standard"
+                />
+              </div>
+            </Box>
+          </SistentThemeProvider>
+          <a id="Sizes">
+            <h2>Sizes</h2>
+          </a>
+          <p>
+            TextField can have small or normal field sizes. According the requirement it can be adjusted.
+          </p>
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <Box
+              component="form"
+              sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
+              noValidate
+              autoComplete="off"
+            >
+              <div>
+                <TextField
+                  label="Size"
+                  id="outlined-size-small"
+                  defaultValue="Small"
+                  size="small"
+                />
+                <TextField label="Size" id="outlined-size-normal" defaultValue="Normal" />
+              </div>
+              <div>
+                <TextField
+                  label="Size"
+                  id="filled-size-small"
+                  defaultValue="Small"
+                  variant="filled"
+                  size="small"
+                />
+                <TextField
+                  label="Size"
+                  id="filled-size-normal"
+                  defaultValue="Normal"
+                  variant="filled"
+                />
+              </div>
+              <div>
+                <TextField
+                  label="Size"
+                  id="standard-size-small"
+                  defaultValue="Small"
+                  size="small"
+                  variant="standard"
+                />
+                <TextField
+                  label="Size"
+                  id="standard-size-normal"
+                  defaultValue="Normal"
+                  variant="standard"
+                />
+              </div>
+            </Box>
+          </SistentThemeProvider>
+          <a id="Full Width">
+            <h2>Full Width</h2>
+          </a>
+          <p>
+            FullWidth attribute can be used to make the input take up the full width of its container.
+          </p>
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <Box sx={{ width: 600, maxWidth: "100%" }}>
+              <TextField fullWidth label="fullWidth" id="fullWidth" />
+            </Box>
+          </SistentThemeProvider>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default SistentTextField;