diff --git a/components/elements/fields/renderMultiline.js b/components/elements/fields/renderMultiline.js
new file mode 100644
index 00000000..49918fd0
--- /dev/null
+++ b/components/elements/fields/renderMultiline.js
@@ -0,0 +1,51 @@
+import React from "react";
+
+export const RenderMultiline = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    errorMsg,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                {touched && error && (
+                    <span id={id + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {touched &&
+                            ((error && (
+                                <span>{errorMsg ? errorMsg : error}</span>
+                            )) ||
+                                (warning && <span>{warning}</span>))}
+                    </span>
+                )}
+                <textarea
+                    id={id}
+                    name={id}
+                    rows={rows}
+                    className={className}
+                    {...input}
+                    maxLength={
+                        custom.hasOwnProperty("maxFieldLength")
+                            ? custom.maxFieldLength
+                                ? custom.maxFieldLength
+                                : 800
+                            : 800
+                    }
+                ></textarea>
+            </div>
+        </>
+    );
+};
diff --git a/components/elements/fields/renderTextfield.js b/components/elements/fields/renderTextfield.js
new file mode 100644
index 00000000..60960aa6
--- /dev/null
+++ b/components/elements/fields/renderTextfield.js
@@ -0,0 +1,91 @@
+import React from "react";
+import { useRouter } from "next/router";
+import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
+import { getFieldTranslation } from "../helpers/translationHelpers";
+
+export const RenderTextfield = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    errorMsg,
+    meta: { touched, error },
+    ...custom
+}) => {
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    const translatedLabel = getFieldTranslation({
+        label,
+        locale,
+        appealtypes,
+        fieldLookup
+    });
+
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+                    {translatedLabel}
+                </label>
+                {!custom.hasOwnProperty("showErrorBottom")
+                    ? touched &&
+                      error && (
+                          <span
+                              id={id + "-error"}
+                              className="govuk-error-message"
+                          >
+                              <span className="govuk-visually-hidden">
+                                  Error:
+                              </span>{" "}
+                              {error}
+                          </span>
+                      )
+                    : ""}
+                <input
+                    {...input}
+                    type={custom.type}
+                    className={className}
+                    name={name}
+                    id={id}
+                    maxLength={
+                        custom.hasOwnProperty("maxFieldLength")
+                            ? custom.maxFieldLength
+                                ? custom.maxFieldLength
+                                : 100
+                            : 200
+                    }
+                    pattern={
+                        custom.hasOwnProperty("pattern")
+                            ? custom.pattern
+                            : undefined
+                    }
+                />
+                {custom.hasOwnProperty("showErrorBottom")
+                    ? touched &&
+                      error && (
+                          <span
+                              id={id + "-error"}
+                              className="govuk-error-message"
+                          >
+                              <span className="govuk-visually-hidden">
+                                  Error:
+                              </span>{" "}
+                              {error}
+                          </span>
+                      )
+                    : ""}
+            </div>
+        </>
+    );
+};
diff --git a/components/elements/index.js b/components/elements/index.js
index 338da931..bd84bb6d 100644
--- a/components/elements/index.js
+++ b/components/elements/index.js
@@ -46,82 +46,8 @@ import {
     getPickListTranslation
 } from "./helpers/translationHelpers";
 import { RenderRichMultiline } from "./fields/renderRichMultiline";
-
-const RenderTextfield = ({
-    id,
-    className,
-    rows,
-    datafieldname,
-    name,
-    label,
-    input,
-    errorMsg,
-    meta: { touched, error },
-    ...custom
-}) => {
-    return (
-        <>
-            <div
-                className={
-                    touched && error
-                        ? "govuk-form-group govuk-form-group--error"
-                        : "govuk-form-group "
-                }
-            >
-                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
-                    {FieldsTranslations(label)}
-                </label>
-                {!custom.hasOwnProperty("showErrorBottom")
-                    ? touched &&
-                      error && (
-                          <span
-                              id={id + "-error"}
-                              className="govuk-error-message"
-                          >
-                              <span className="govuk-visually-hidden">
-                                  Error:
-                              </span>{" "}
-                              {error}
-                          </span>
-                      )
-                    : ""}
-                <input
-                    {...input}
-                    type={custom.type}
-                    className={className}
-                    name={name}
-                    id={id}
-                    maxLength={
-                        custom.hasOwnProperty("maxFieldLength")
-                            ? custom.maxFieldLength
-                                ? custom.maxFieldLength
-                                : 100
-                            : 200
-                    }
-                    pattern={
-                        custom.hasOwnProperty("pattern")
-                            ? custom.pattern
-                            : undefined
-                    }
-                />
-                {custom.hasOwnProperty("showErrorBottom")
-                    ? touched &&
-                      error && (
-                          <span
-                              id={id + "-error"}
-                              className="govuk-error-message"
-                          >
-                              <span className="govuk-visually-hidden">
-                                  Error:
-                              </span>{" "}
-                              {error}
-                          </span>
-                      )
-                    : ""}
-            </div>
-        </>
-    );
-};
+import { RenderTextfield } from "./fields/renderTextfield";
+import { RenderMultiline } from "./fields/renderMultiline";
 
 export function Textfield(props) {
     const {
@@ -284,59 +210,6 @@ export function Textfield(props) {
     }
 }
 
-const RenderMultiline = ({
-    id,
-    className,
-    rows,
-    datafieldname,
-    name,
-    label,
-    input,
-    errorMsg,
-    meta: { touched, error },
-    ...custom
-}) => {
-    return (
-        <>
-            <div
-                className={
-                    touched && error
-                        ? "govuk-form-group govuk-form-group--error"
-                        : "govuk-form-group "
-                }
-            >
-                {/* <label className="govuk-label " htmlFor={id} id={id + "_label"}>
-                    {FieldsTranslations(label)}s
-                </label> */}
-                {touched && error && (
-                    <span id={id + "-error"} className="govuk-error-message">
-                        <span className="govuk-visually-hidden">Error:</span>{" "}
-                        {touched &&
-                            ((error && (
-                                <span>{errorMsg ? errorMsg : error}</span>
-                            )) ||
-                                (warning && <span>{warning}</span>))}
-                    </span>
-                )}
-                <textarea
-                    id={id}
-                    name={id}
-                    rows={rows}
-                    className={className}
-                    {...input}
-                    maxLength={
-                        custom.hasOwnProperty("maxFieldLength")
-                            ? custom.maxFieldLength
-                                ? custom.maxFieldLength
-                                : 800
-                            : 800
-                    }
-                ></textarea>
-            </div>
-        </>
-    );
-};
-
 export function MultiLinefield(props) {
     const {
         name,
diff --git a/memory-bank/change-log.md b/memory-bank/change-log.md
index d15ea182..b36ec9f2 100644
--- a/memory-bank/change-log.md
+++ b/memory-bank/change-log.md
@@ -76,6 +76,30 @@ Follow-ups:
 
 - Continue Phase 2 in bounded slices by extracting additional low-risk leaf renderers (e.g., `RenderMultiline` / `RenderTextfield`) with no behavior change.
 
+### CL-00Z: 22500 `components/elements/index.js` Phase 2 leaf renderer extraction (Text + Multiline)
+
+date: 2026-04-07  
+author: Cline  
+scope: `components/elements/index.js`, `components/elements/fields/renderTextfield.js`, `components/elements/fields/renderMultiline.js`  
+type: change  
+rationale: Complete the requested next bounded phase by extracting the additional low-risk leaf renderers (`RenderTextfield`, `RenderMultiline`) from the elements monolith into dedicated field modules while preserving existing wiring and behavior.  
+impact: Refactor-only move of two renderer components; no intended changes to auth/API/security and no intended EN/CY behavior change.  
+status: completed
+
+Summary:
+
+- Added `components/elements/fields/renderTextfield.js` and `components/elements/fields/renderMultiline.js`.
+- Updated `components/elements/index.js` to import the extracted renderers.
+- Removed inline `RenderTextfield` and `RenderMultiline` implementations from `index.js`.
+
+Validation:
+
+- `npx eslint components/elements/index.js components/elements/fields/renderTextfield.js components/elements/fields/renderMultiline.js` -> pass
+
+Follow-ups:
+
+- Continue Phase 2 by selecting the next lowest-risk leaf renderer extraction in a separate commit.
+
 ### CL-001: TASK22211 endpoint search-document contract consistency slice
 
 date: 2026-03-23