Extract PickList wrapper from elements index

components/elements/fields/pickListField.js

@@ -0,0 +1,29 @@
+import React from "react";
+import useTranslation from "next-translate/useTranslation";
+import { Field } from "redux-form";
+import { RenderPickList } from "./renderPickList";
+
+export function PickList(props) {
+    const { datafieldname } = props;
+    let { t } = useTranslation();
+
+    const required = (value) => {
+        return value || value == 0
+            ? undefined
+            : t("newappeal:is-required-label");
+    };
+
+    return (
+        <Field
+            name={props.name}
+            id={props.name}
+            label={props.label}
+            component={RenderPickList}
+            datafieldname={datafieldname}
+            picklistData={props.picklistData}
+            hint={props.hint}
+            errorMsg={t("newappeal:is-required-label")}
+            validate={[required]}
+        />
+    );
+}

components/elements/index.js

@@ -23,11 +23,12 @@ import { RenderDatePicker } from "./fields/renderDatePicker";
 import { RenderYesNo } from "./fields/renderYesNo";
 import { RenderRadio } from "./fields/renderRadio";
 import { RenderCheckBox } from "./fields/renderCheckBox";
-import { RenderPickList } from "./fields/renderPickList";
+import { PickList } from "./fields/pickListField";
 import { RenderDecimalField } from "./fields/renderDecimalField";
 import { RenderFileUpload } from "./fields/renderFileUpload";
 export { RenderSubFields } from "./fields/renderSubFields";
 export { FieldArrayForm } from "./fields/fieldArrayForm";
+export { PickList };
 
 const getValidationMessages = (t) => ({
     requiredMessage: t("newappeal:is-required-label"),
@@ -821,29 +822,6 @@ export function CheckBoxfield(props) {
     );
 }
 
-export function PickList(props) {
-    const { name, label, datafieldname, hint } = props;
-    let { t } = useTranslation();
-    const required = (value) => {
-        return value || value == 0
-            ? undefined
-            : t("newappeal:is-required-label");
-    };
-    return (
-        <Field
-            name={props.name}
-            id={props.name}
-            label={props.label}
-            component={RenderPickList}
-            datafieldname={datafieldname}
-            picklistData={props.picklistData}
-            hint={props.hint}
-            errorMsg={t("newappeal:is-required-label")}
-            validate={[required]}
-        />
-    );
-}
-
 export function NumericField(props) {
     const {
         name,

memory-bank/change-log.md

@@ -3585,3 +3585,30 @@ Validation:
 Follow-ups:
 
 - Continue bounded no-behavior-change slices by removing dead locals/comments and extracting one additional low-risk field wrapper at a time.
+
+---
+
+### CL-101: 22500 `PickList` wrapper extraction from `components/elements/index.js`
+
+date: 2026-04-08
+author: Cline
+scope: `components/elements/index.js`, `components/elements/fields/pickListField.js`
+type: change
+rationale: Execute one bounded Phase 2 renderer/wrapper extraction slice by moving the `PickList` wrapper out of the elements monolith into a dedicated field module.
+impact: No intended behavior change; preserves existing EN/CY translation behavior and validation wiring while reducing `index.js` size/coupling.
+status: completed
+
+Summary:
+
+- Added `components/elements/fields/pickListField.js` and moved the existing `PickList` wrapper implementation.
+- Updated `components/elements/index.js` to import/export `PickList` from the new field module.
+- Removed inline `PickList` wrapper implementation from `index.js`.
+- Removed now-unused `RenderPickList` import from `index.js` after extraction.
+
+Validation:
+
+- `npx eslint components/elements/index.js components/elements/fields/pickListField.js` -> pass
+
+Follow-ups:
+
+- Continue bounded no-behavior-change slices by extracting one additional low-risk wrapper (e.g., `CheckBoxfield`) or removing dead locals/debug logging in place.