From d431122700d12b1cc8b6c8e79310a31f57f7f379 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Fri, 17 Oct 2025 12:23:16 +0200
Subject: [PATCH 1/6] fix: linter issues

---
 src/atoms/extendAtom.ts                               |  4 ++--
 src/fields/list-field/listField.ts                    | 11 ++++-------
 src/hooks/use-required-props/useRequiredProps.ts      |  5 +++--
 .../use-select-field-props/useSelectFieldProps.ts     |  9 ++++-----
 src/scenarios/StoryForm.tsx                           |  4 ++--
 5 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/atoms/extendAtom.ts b/src/atoms/extendAtom.ts
index 80f984c..8054a03 100644
--- a/src/atoms/extendAtom.ts
+++ b/src/atoms/extendAtom.ts
@@ -1,11 +1,11 @@
-import type { Getter, PrimitiveAtom } from "jotai";
+import type { Getter, Atom } from "jotai";
 import { atomWithDefault } from "jotai/utils";
 
 export const extendAtom = <
   T extends Record<string, unknown>,
   E extends Record<string, unknown>,
 >(
-  baseAtom: PrimitiveAtom<T>,
+  baseAtom: Atom<T>,
   makeAtoms: (cfg: T, get: Getter) => E,
 ) => {
   const extended = atomWithDefault((get) => {
diff --git a/src/fields/list-field/listField.ts b/src/fields/list-field/listField.ts
index 461452a..b7142bb 100644
--- a/src/fields/list-field/listField.ts
+++ b/src/fields/list-field/listField.ts
@@ -68,18 +68,15 @@ export const listField = <Fields extends FormFields>({
     }),
   );
 
-  const listFieldAtom = extendAtom(
-    listAtom({ ...config, validate }) as any,
-    () => ({
-      required: requiredAtom,
-    }),
-  ) as unknown as RequiredListField<Fields>;
+  const listFieldAtom = extendAtom(listAtom({ ...config, validate }), () => ({
+    required: requiredAtom,
+  })) as unknown as RequiredListField<Fields>;
 
   listFieldAtom.optional = (readRequired: ReadRequired = () => false) => {
     const { validate, requiredAtom } = makeOptional(readRequired);
 
     const optionalZodFieldAtom = extendAtom(
-      listAtom({ ...config, validate }) as any,
+      listAtom({ ...config, validate }),
       () => ({ required: requiredAtom }),
     ) as unknown as OptionalListField<Fields>;
 
diff --git a/src/hooks/use-required-props/useRequiredProps.ts b/src/hooks/use-required-props/useRequiredProps.ts
index 23a4c72..a849558 100644
--- a/src/hooks/use-required-props/useRequiredProps.ts
+++ b/src/hooks/use-required-props/useRequiredProps.ts
@@ -1,5 +1,6 @@
-import { useAtomValue, useSetAtom } from "jotai";
 import { useMemo } from "react";
+import { useAtomValue, useSetAtom } from "jotai";
+import type { ZodAny } from "zod";
 
 import { OptionalZodField, ZodField } from "../../fields/zod-field/zodField";
 
@@ -30,7 +31,7 @@ export const useRequiredProps = ({
   );
 };
 
-export const useRequiredActions = (fieldAtom: OptionalZodField<any>) => {
+export const useRequiredActions = (fieldAtom: OptionalZodField<ZodAny>) => {
   const field = useAtomValue(fieldAtom);
   const setRequired = useSetAtom(field.required);
 
diff --git a/src/hooks/use-select-field-props/useSelectFieldProps.ts b/src/hooks/use-select-field-props/useSelectFieldProps.ts
index 62c3f06..cf67855 100644
--- a/src/hooks/use-select-field-props/useSelectFieldProps.ts
+++ b/src/hooks/use-select-field-props/useSelectFieldProps.ts
@@ -1,6 +1,6 @@
-import { UseFieldOptions } from "form-atoms";
-import { useAtomValue } from "jotai";
 import { ChangeEvent, useCallback, useMemo } from "react";
+import { useAtomValue } from "jotai";
+import type { UseFieldOptions } from "form-atoms";
 
 import { FieldProps, type UseOptionsProps, useFieldProps } from "..";
 import type { ZodField, ZodFieldValue } from "../../fields";
@@ -8,7 +8,7 @@ import type { ZodField, ZodFieldValue } from "../../fields";
 /**
  * This restricts ZodField to have optional schema defaulting to 'undefined of required schema'.
  */
-export type SelectField = ZodField<any>;
+export type SelectField = ZodField;
 
 export type SelectFieldProps<
   Option,
@@ -31,8 +31,7 @@ export const useSelectFieldProps = <Option, Field extends SelectField>(
 ) => {
   const atom = useAtomValue(field);
   const fieldValue = useAtomValue(atom.value);
-  // TODO: getValue should be useMemo dependency, currently we asume that it is stable
-  const values = useMemo(() => options.map(getValue), [options]);
+  const values = useMemo(() => options.map(getValue), [options, getValue]);
   const value = useMemo(() => values.indexOf(fieldValue), [fieldValue, values]);
 
   const getEventValue = useCallback(
diff --git a/src/scenarios/StoryForm.tsx b/src/scenarios/StoryForm.tsx
index 90ec5f0..9e39e0c 100644
--- a/src/scenarios/StoryForm.tsx
+++ b/src/scenarios/StoryForm.tsx
@@ -1,5 +1,5 @@
 import { action } from "storybook/actions";
-import { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { FormAtom, FormFields, formAtom, useFormActions } from "form-atoms";
 import { useMemo } from "react";
 
@@ -20,7 +20,7 @@ export const StoryForm = <Fields extends FormFields>({
   children,
   required = true,
 }: Props<Fields>) => {
-  const form = useMemo(() => formAtom(fields), []);
+  const form = useMemo(() => formAtom(fields), [fields]);
   const { reset, submit } = useFormActions(form);
 
   return (

From efcb4a2e5dce30763f307ace5f51295b21e94594 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Fri, 17 Oct 2025 12:44:36 +0200
Subject: [PATCH 2/6] fix: useFieldProps store from options

---
 .../useClearInputAction.ts                    |  1 +
 src/hooks/use-field-props/useFieldProps.ts    | 23 ++++++++++---------
 src/hooks/use-options/useOptions.tsx          |  3 +--
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/hooks/use-clear-input-action/useClearInputAction.ts b/src/hooks/use-clear-input-action/useClearInputAction.ts
index c7855fb..c4a70e3 100644
--- a/src/hooks/use-clear-input-action/useClearInputAction.ts
+++ b/src/hooks/use-clear-input-action/useClearInputAction.ts
@@ -13,6 +13,7 @@ export const useClearInputAction = <Value>(
     () => ({
       clear() {
         if (ref) {
+          // eslint-disable-next-line react-hooks/immutability
           ref.value = "";
         }
       },
diff --git a/src/hooks/use-field-props/useFieldProps.ts b/src/hooks/use-field-props/useFieldProps.ts
index f6db0db..f1b3e00 100644
--- a/src/hooks/use-field-props/useFieldProps.ts
+++ b/src/hooks/use-field-props/useFieldProps.ts
@@ -1,6 +1,6 @@
-import { UseFieldOptions, useField } from "form-atoms";
+import { ChangeEvent, useMemo, startTransition } from "react";
 import { useAtomValue, useSetAtom } from "jotai";
-import { ChangeEvent, useMemo, useTransition } from "react";
+import { UseAtomOptions, useField } from "form-atoms";
 
 import { ZodField, ZodFieldValue } from "../../fields";
 
@@ -16,16 +16,15 @@ export function useFieldProps<
         value: ZodFieldValue<Field>,
       ) => ZodFieldValue<Field>
     : never,
-  options?: UseFieldOptions<ZodFieldValue<Field>>,
+  options?: UseAtomOptions,
 ) {
   const { actions, state } = useField<ZodFieldValue<Field>>(fieldAtom, options);
-  const field = useAtomValue(fieldAtom);
-  const name = useAtomValue(field.name);
-  const required = useAtomValue(field.required);
-  const validationCount = useAtomValue(field._validateCount);
-  const validate = useSetAtom(field.validate);
-  const ref = useSetAtom(field.ref);
-  const [, startTransition] = useTransition();
+  const field = useAtomValue(fieldAtom, options);
+  const name = useAtomValue(field.name, options);
+  const required = useAtomValue(field.required, options);
+  const validationCount = useAtomValue(field._validateCount, options);
+  const validate = useSetAtom(field.validate, options);
+  const ref = useSetAtom(field.ref, options);
 
   const ariaInvalid = state.validateStatus === "invalid";
   // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid
@@ -62,10 +61,12 @@ export function useFieldProps<
       actions,
       name,
       required,
-      validationCount,
       getEventValue,
       ref,
       validate,
+      ariaInvalid,
+      fieldAtom,
+      requiredAriaInvalid,
     ],
   );
 }
diff --git a/src/hooks/use-options/useOptions.tsx b/src/hooks/use-options/useOptions.tsx
index ec6174f..83b1a59 100644
--- a/src/hooks/use-options/useOptions.tsx
+++ b/src/hooks/use-options/useOptions.tsx
@@ -1,8 +1,7 @@
-import { FieldAtom } from "form-atoms";
 import { ReactNode, useMemo } from "react";
 
 export type UseOptionsProps<Option> = {
-  field: FieldAtom<any>;
+  field: { toString(): string };
   options: readonly Option[];
   getLabel: (option: Option) => ReactNode;
 };

From 92e97cd9833c8e61ed456b36c25a1dc276b9641d Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Fri, 17 Oct 2025 12:51:45 +0200
Subject: [PATCH 3/6] docs: skip upload list story

---
 src/components/file-upload/FileUpload.tsx                    | 3 +--
 ...ploadList.stories.tsx => FileUploadList.stories.skip.tsx} | 5 +++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename src/components/file-upload/{FileUploadList.stories.tsx => FileUploadList.stories.skip.tsx} (96%)

diff --git a/src/components/file-upload/FileUpload.tsx b/src/components/file-upload/FileUpload.tsx
index 3d93f45..276497a 100644
--- a/src/components/file-upload/FileUpload.tsx
+++ b/src/components/file-upload/FileUpload.tsx
@@ -19,8 +19,7 @@ export function FileUpload<Value>({ field, children }: Props<Value>) {
   const validate = useSetAtom(atoms.validate);
   const status = useAtomValue(atoms.uploadStatus);
 
-  // runs the upload
-  useEffect(() => validate(), []);
+  useEffect(() => validate(), [validate]);
 
   return children({
     isLoading: status === "loading",
diff --git a/src/components/file-upload/FileUploadList.stories.tsx b/src/components/file-upload/FileUploadList.stories.skip.tsx
similarity index 96%
rename from src/components/file-upload/FileUploadList.stories.tsx
rename to src/components/file-upload/FileUploadList.stories.skip.tsx
index c7169d5..3590c47 100644
--- a/src/components/file-upload/FileUploadList.stories.tsx
+++ b/src/components/file-upload/FileUploadList.stories.skip.tsx
@@ -5,7 +5,7 @@ import { SwitchUploadAtom } from "./SwitchUploadAtom";
 import { uploadAtom } from "../../atoms";
 import { StringField, listField, stringField } from "../../fields";
 import { PicoFieldErrors } from "../../scenarios/PicoFieldErrors";
-import { formStory, meta } from "../../scenarios/StoryForm";
+import { meta } from "../../scenarios/StoryForm";
 
 import { listStory, render } from "../../fields/list-field/listField.stories";
 
@@ -158,7 +158,8 @@ export const FileUploadList = listStory({
                 files.forEach((file) =>
                   add({
                     id: "",
-                    url: "", // TODO: file,
+                    // @ts-expect-error uploadAtom value needs to branch to file/result
+                    url: fakeUploadAtom(file),
                   }),
                 );
               }}

From e28e99d9a80a567d854715d7032fa716f48e3dfa Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Fri, 17 Oct 2025 15:43:05 +0200
Subject: [PATCH 4/6] fix(multi-select): index value - avoiding recreating the
 ref contents

extract logic with refs code
---
 ...es.skip.tsx => FileUploadList.stories.tsx} |  2 -
 src/fields/list-field/listField.stories.tsx   |  2 +-
 src/hooks/use-field-props/useFieldProps.ts    |  4 +-
 .../useIndexValue.ts                          | 58 +++++++++++++++++++
 .../useMultiSelectFieldProps.tsx              | 40 +++++--------
 5 files changed, 75 insertions(+), 31 deletions(-)
 rename src/components/file-upload/{FileUploadList.stories.skip.tsx => FileUploadList.stories.tsx} (98%)
 create mode 100644 src/hooks/use-multiselect-field-props/useIndexValue.ts

diff --git a/src/components/file-upload/FileUploadList.stories.skip.tsx b/src/components/file-upload/FileUploadList.stories.tsx
similarity index 98%
rename from src/components/file-upload/FileUploadList.stories.skip.tsx
rename to src/components/file-upload/FileUploadList.stories.tsx
index 3590c47..c0340d9 100644
--- a/src/components/file-upload/FileUploadList.stories.skip.tsx
+++ b/src/components/file-upload/FileUploadList.stories.tsx
@@ -5,12 +5,10 @@ import { SwitchUploadAtom } from "./SwitchUploadAtom";
 import { uploadAtom } from "../../atoms";
 import { StringField, listField, stringField } from "../../fields";
 import { PicoFieldErrors } from "../../scenarios/PicoFieldErrors";
-import { meta } from "../../scenarios/StoryForm";
 
 import { listStory, render } from "../../fields/list-field/listField.stories";
 
 export default {
-  ...meta,
   title: "components/FileUpload",
   render,
 };
diff --git a/src/fields/list-field/listField.stories.tsx b/src/fields/list-field/listField.stories.tsx
index 5ab6bdf..cb04b49 100644
--- a/src/fields/list-field/listField.stories.tsx
+++ b/src/fields/list-field/listField.stories.tsx
@@ -8,9 +8,9 @@ import {
 import { FormFields, InputField } from "form-atoms";
 
 import { listField, textField } from "..";
-import { StoryForm } from "../../scenarios/StoryForm";
 import { FieldLabel } from "../../components";
 import { PicoFieldErrors } from "../../scenarios/PicoFieldErrors";
+import { StoryForm } from "../../scenarios/StoryForm";
 
 export const render = <Fields extends FormFields>({
   atom,
diff --git a/src/hooks/use-field-props/useFieldProps.ts b/src/hooks/use-field-props/useFieldProps.ts
index f1b3e00..7c92842 100644
--- a/src/hooks/use-field-props/useFieldProps.ts
+++ b/src/hooks/use-field-props/useFieldProps.ts
@@ -1,6 +1,6 @@
-import { ChangeEvent, useMemo, startTransition } from "react";
+import { type ChangeEvent, useMemo, startTransition } from "react";
 import { useAtomValue, useSetAtom } from "jotai";
-import { UseAtomOptions, useField } from "form-atoms";
+import { type UseAtomOptions, useField } from "form-atoms";
 
 import { ZodField, ZodFieldValue } from "../../fields";
 
diff --git a/src/hooks/use-multiselect-field-props/useIndexValue.ts b/src/hooks/use-multiselect-field-props/useIndexValue.ts
new file mode 100644
index 0000000..36fb3a8
--- /dev/null
+++ b/src/hooks/use-multiselect-field-props/useIndexValue.ts
@@ -0,0 +1,58 @@
+/* eslint-disable react-hooks/refs */
+import { useCallback, useRef } from "react";
+
+type UseIndexValueParams = {
+  fieldValue: readonly unknown[];
+  optionValues: readonly unknown[];
+};
+
+const EMPTY_REF = [] as const;
+
+/**
+ * Custom hook to manage the active indexes of a multi options field.
+ * @returns A tuple containing the active indexes and a function to set the refs.
+ */
+export function useIndexValue({
+  fieldValue,
+  optionValues,
+}: UseIndexValueParams) {
+  const prevValue = useRef(fieldValue);
+  const activeIndexes = useRef<readonly string[]>(EMPTY_REF);
+
+  if (activeIndexes.current === EMPTY_REF) {
+    // prevent recalculation on every render
+    activeIndexes.current = fieldValue.map(
+      (activeOption) => `${optionValues.indexOf(activeOption)}`,
+    );
+  }
+
+  if (prevValue.current != fieldValue) {
+    /**
+     * The field was set from outside via initialValue, reset action, or set manually.
+     * Recompute the indexes.
+     **/
+    activeIndexes.current = fieldValue.map(
+      (activeOption) => `${optionValues.indexOf(activeOption)}`,
+    );
+  }
+  const setRefs = useCallback(
+    ({
+      nextIndexes,
+      nextValues,
+    }: {
+      nextIndexes: readonly string[];
+      nextValues: readonly unknown[];
+    }) => {
+      activeIndexes.current = nextIndexes;
+
+      /**
+       * When user change event happened, we set the value.
+       * On the next render when the fieldValue is updated, we can skip calculating the activeIndexes.
+       */
+      prevValue.current = nextValues;
+    },
+    [prevValue, activeIndexes],
+  );
+
+  return [activeIndexes.current, setRefs] as const;
+}
diff --git a/src/hooks/use-multiselect-field-props/useMultiSelectFieldProps.tsx b/src/hooks/use-multiselect-field-props/useMultiSelectFieldProps.tsx
index 41d89f0..a6d73c3 100644
--- a/src/hooks/use-multiselect-field-props/useMultiSelectFieldProps.tsx
+++ b/src/hooks/use-multiselect-field-props/useMultiSelectFieldProps.tsx
@@ -1,10 +1,11 @@
-import { UseFieldOptions } from "form-atoms";
+import { type ChangeEvent, useCallback, useMemo } from "react";
+import type { UseFieldOptions } from "form-atoms";
 import { useAtomValue } from "jotai";
-import { ChangeEvent, useCallback, useMemo, useRef } from "react";
 import { ArrayCardinality, ZodAny, ZodArray } from "zod";
 
 import { UseOptionsProps, useFieldProps } from "..";
 import { ZodArrayField, ZodField, ZodFieldValue } from "../../fields";
+import { useIndexValue } from "./useIndexValue";
 
 export type UseMultiSelectFieldProps<Option, Field extends ZodArrayField> = {
   field: Field;
@@ -23,44 +24,31 @@ export const useMultiSelectFieldProps = <Option, Field extends ZodArrayField>(
   { field, options, getValue }: UseMultiSelectFieldProps<Option, Field>,
   fieldOptions?: UseFieldOptions<ZodFieldValue<Field>>,
 ) => {
-  const atom = useAtomValue(field);
-  const fieldValue = useAtomValue(atom.value);
+  const atom = useAtomValue(field, fieldOptions);
+  const fieldValue = useAtomValue(atom.value, fieldOptions);
   const optionValues = useMemo(
     () => options.map(getValue),
     [getValue, options],
   );
 
-  const prevValue = useRef(fieldValue);
+  const [value, setRefs] = useIndexValue({
+    fieldValue,
+    optionValues,
+  });
 
-  const activeIndexes = useRef<string[]>(
-    fieldValue.map((activeOption) => `${optionValues.indexOf(activeOption)}`),
-  );
-
-  if (prevValue.current != fieldValue) {
-    /**
-     * The field was set from outside via initialValue, reset action, or set manually.
-     * Recompute the indexes.
-     **/
-    activeIndexes.current = fieldValue.map(
-      (activeOption) => `${optionValues.indexOf(activeOption)}`,
-    );
-  }
   const getEventValue = useCallback((event: ChangeEvent<HTMLSelectElement>) => {
     const nextIndexes = [...event.currentTarget.options]
       .filter((option) => option.selected)
       .map((option) => option.value);
 
-    activeIndexes.current = nextIndexes;
-
     const nextValues = nextIndexes.map(
       (index) => optionValues[parseInt(index)],
     );
 
-    /**
-     * When user change event happened, we set the value.
-     * On the next render when the fieldValue is updated, we can skip calculating the activeIndexes.
-     */
-    prevValue.current = nextValues;
+    setRefs({
+      nextIndexes,
+      nextValues,
+    });
 
     return nextValues as ZodFieldValue<Field>;
   }, []);
@@ -71,5 +59,5 @@ export const useMultiSelectFieldProps = <Option, Field extends ZodArrayField>(
     fieldOptions,
   );
 
-  return { ...props, value: activeIndexes.current };
+  return { ...props, value };
 };

From 9694aa98e2e9af5a56b3fc20aad69546b7ec4eb3 Mon Sep 17 00:00:00 2001
From: Miroslav Petrik <miroslavpetrik@outlook.com>
Date: Fri, 17 Oct 2025 16:08:50 +0200
Subject: [PATCH 5/6] fix(checkbox-group): reuse the indexValue as in
 multi-select

---
 .../use-checkbox-group/useCheckboxGroup.tsx   |  2 +-
 .../useCheckboxGroupProps.tsx                 | 56 ++++++++-----------
 .../useIndexValue.ts                          | 20 ++++---
 .../useMultiSelectFieldProps.tsx              | 31 +++++-----
 4 files changed, 53 insertions(+), 56 deletions(-)

diff --git a/src/hooks/use-checkbox-group/useCheckboxGroup.tsx b/src/hooks/use-checkbox-group/useCheckboxGroup.tsx
index c747146..be6ca8d 100644
--- a/src/hooks/use-checkbox-group/useCheckboxGroup.tsx
+++ b/src/hooks/use-checkbox-group/useCheckboxGroup.tsx
@@ -39,6 +39,6 @@ export const useCheckboxGroup = <Option, Field extends ZodArrayField>(
     ...option,
     type: "checkbox" as const,
     required,
-    checked: props.value.includes(option.value),
+    checked: props.value.includes(`${option.value}`),
   }));
 };
diff --git a/src/hooks/use-checkbox-group/useCheckboxGroupProps.tsx b/src/hooks/use-checkbox-group/useCheckboxGroupProps.tsx
index 20bd9a7..bb7b397 100644
--- a/src/hooks/use-checkbox-group/useCheckboxGroupProps.tsx
+++ b/src/hooks/use-checkbox-group/useCheckboxGroupProps.tsx
@@ -1,6 +1,6 @@
-import { UseFieldOptions } from "form-atoms";
+import type { UseFieldOptions } from "form-atoms";
 import { useAtomValue } from "jotai";
-import { ChangeEvent, useMemo, useRef } from "react";
+import { ChangeEvent, useCallback, useMemo } from "react";
 
 import {
   type UseMultiSelectFieldProps as UseCheckboxGroupFieldProps,
@@ -8,6 +8,8 @@ import {
 } from "../";
 import type { ZodArrayField, ZodFieldValue } from "../../fields";
 
+import { useIndexValue } from "../use-multiselect-field-props/useIndexValue";
+
 export const useCheckboxGroupFieldProps = <Option, Field extends ZodArrayField>(
   { field, options, getValue }: UseCheckboxGroupFieldProps<Option, Field>,
   fieldOptions?: UseFieldOptions<ZodFieldValue<Field>>,
@@ -19,40 +21,28 @@ export const useCheckboxGroupFieldProps = <Option, Field extends ZodArrayField>(
     [getValue, options],
   );
 
-  const prevValue = useRef(fieldValue);
-
-  const activeIndexes = useRef<number[]>(
-    fieldValue.map((activeOption) => optionValues.indexOf(activeOption)),
-  );
-
-  if (prevValue.current != fieldValue) {
-    /**
-     * The field was set from outside via initialValue, reset action, or set manually.
-     * Recompute the indexes.
-     **/
-    activeIndexes.current = fieldValue.map((activeOption) =>
-      optionValues.indexOf(activeOption),
-    );
-  }
-
-  const getEventValue = (event: ChangeEvent<HTMLInputElement>) => {
-    const index = parseInt(event.currentTarget.value);
-    const nextIndexes = event.currentTarget.checked
-      ? [...activeIndexes.current, index]
-      : activeIndexes.current.filter((val) => val != index);
+  const { indexRef, value, setRefs } = useIndexValue({
+    fieldValue,
+    optionValues,
+  });
 
-    activeIndexes.current = nextIndexes;
+  const getEventValue = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const index = event.currentTarget.value;
+      const nextIndexes = event.currentTarget.checked
+        ? [...indexRef.current, index]
+        : indexRef.current.filter((val) => val != index);
 
-    const nextValues = nextIndexes.map((index) => optionValues[index]);
+      const nextValues = nextIndexes.map(
+        (index) => optionValues[parseInt(index)],
+      );
 
-    /**
-     * When user change event happened, we set the value.
-     * On the next render when the fieldValue is updated, we can skip calculating the activeIndexes.
-     */
-    prevValue.current = nextValues;
+      setRefs({ nextIndexes, nextValues });
 
-    return nextValues as ZodFieldValue<Field>;
-  };
+      return nextValues as ZodFieldValue<Field>;
+    },
+    [indexRef, optionValues],
+  );
 
   const props = useFieldProps<Field, HTMLInputElement>(
     field,
@@ -60,5 +50,5 @@ export const useCheckboxGroupFieldProps = <Option, Field extends ZodArrayField>(
     fieldOptions,
   );
 
-  return { ...props, value: activeIndexes.current };
+  return { ...props, value };
 };
diff --git a/src/hooks/use-multiselect-field-props/useIndexValue.ts b/src/hooks/use-multiselect-field-props/useIndexValue.ts
index 36fb3a8..6a86d77 100644
--- a/src/hooks/use-multiselect-field-props/useIndexValue.ts
+++ b/src/hooks/use-multiselect-field-props/useIndexValue.ts
@@ -17,11 +17,11 @@ export function useIndexValue({
   optionValues,
 }: UseIndexValueParams) {
   const prevValue = useRef(fieldValue);
-  const activeIndexes = useRef<readonly string[]>(EMPTY_REF);
+  const indexRef = useRef<readonly string[]>(EMPTY_REF);
 
-  if (activeIndexes.current === EMPTY_REF) {
+  if (indexRef.current === EMPTY_REF) {
     // prevent recalculation on every render
-    activeIndexes.current = fieldValue.map(
+    indexRef.current = fieldValue.map(
       (activeOption) => `${optionValues.indexOf(activeOption)}`,
     );
   }
@@ -31,7 +31,7 @@ export function useIndexValue({
      * The field was set from outside via initialValue, reset action, or set manually.
      * Recompute the indexes.
      **/
-    activeIndexes.current = fieldValue.map(
+    indexRef.current = fieldValue.map(
       (activeOption) => `${optionValues.indexOf(activeOption)}`,
     );
   }
@@ -43,16 +43,20 @@ export function useIndexValue({
       nextIndexes: readonly string[];
       nextValues: readonly unknown[];
     }) => {
-      activeIndexes.current = nextIndexes;
+      indexRef.current = nextIndexes;
 
       /**
        * When user change event happened, we set the value.
-       * On the next render when the fieldValue is updated, we can skip calculating the activeIndexes.
+       * On the next render when the fieldValue is updated, we can skip calculating the indexRef.
        */
       prevValue.current = nextValues;
     },
-    [prevValue, activeIndexes],
+    [prevValue, indexRef],
   );
 
-  return [activeIndexes.current, setRefs] as const;
+  return {
+    value: indexRef.current,
+    indexRef,
+    setRefs,
+  };
 }
diff --git a/src/hooks/use-multiselect-field-props/useMultiSelectFieldProps.tsx b/src/hooks/use-multiselect-field-props/useMultiSelectFieldProps.tsx
index a6d73c3..bcc7f9e 100644
--- a/src/hooks/use-multiselect-field-props/useMultiSelectFieldProps.tsx
+++ b/src/hooks/use-multiselect-field-props/useMultiSelectFieldProps.tsx
@@ -31,27 +31,30 @@ export const useMultiSelectFieldProps = <Option, Field extends ZodArrayField>(
     [getValue, options],
   );
 
-  const [value, setRefs] = useIndexValue({
+  const { value, setRefs } = useIndexValue({
     fieldValue,
     optionValues,
   });
 
-  const getEventValue = useCallback((event: ChangeEvent<HTMLSelectElement>) => {
-    const nextIndexes = [...event.currentTarget.options]
-      .filter((option) => option.selected)
-      .map((option) => option.value);
+  const getEventValue = useCallback(
+    (event: ChangeEvent<HTMLSelectElement>) => {
+      const nextIndexes = [...event.currentTarget.options]
+        .filter((option) => option.selected)
+        .map((option) => option.value);
 
-    const nextValues = nextIndexes.map(
-      (index) => optionValues[parseInt(index)],
-    );
+      const nextValues = nextIndexes.map(
+        (index) => optionValues[parseInt(index)],
+      );
 
-    setRefs({
-      nextIndexes,
-      nextValues,
-    });
+      setRefs({
+        nextIndexes,
+        nextValues,
+      });
 
-    return nextValues as ZodFieldValue<Field>;
-  }, []);
+      return nextValues as ZodFieldValue<Field>;
+    },
+    [optionValues],
+  );
 
   const props = useFieldProps<Field, HTMLSelectElement>(
     field,

From a8a652cfa8b08e74351bcb649ec73b30bb5c4853 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Fri, 17 Oct 2025 14:10:17 +0000
Subject: [PATCH 6/6] chore(release): 5.3.3

## [5.3.3](https://github.com/form-atoms/field/compare/v5.3.2...v5.3.3) (2025-10-17)

### Bug Fixes

* **checkbox-group:** reuse the indexValue as in multi-select ([9694aa9](https://github.com/form-atoms/field/commit/9694aa98e2e9af5a56b3fc20aad69546b7ec4eb3))
* linter issues ([d431122](https://github.com/form-atoms/field/commit/d431122700d12b1cc8b6c8e79310a31f57f7f379))
* **multi-select:** index value - avoiding recreating the ref contents ([e28e99d](https://github.com/form-atoms/field/commit/e28e99d9a80a567d854715d7032fa716f48e3dfa))
* useFieldProps store from options ([efcb4a2](https://github.com/form-atoms/field/commit/efcb4a2e5dce30763f307ace5f51295b21e94594))
---
 CHANGELOG.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2623056..dfc8037 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,13 @@
+## [5.3.3](https://github.com/form-atoms/field/compare/v5.3.2...v5.3.3) (2025-10-17)
+
+
+### Bug Fixes
+
+* **checkbox-group:** reuse the indexValue as in multi-select ([9694aa9](https://github.com/form-atoms/field/commit/9694aa98e2e9af5a56b3fc20aad69546b7ec4eb3))
+* linter issues ([d431122](https://github.com/form-atoms/field/commit/d431122700d12b1cc8b6c8e79310a31f57f7f379))
+* **multi-select:** index value - avoiding recreating the ref contents ([e28e99d](https://github.com/form-atoms/field/commit/e28e99d9a80a567d854715d7032fa716f48e3dfa))
+* useFieldProps store from options ([efcb4a2](https://github.com/form-atoms/field/commit/efcb4a2e5dce30763f307ace5f51295b21e94594))
+
 ## [5.3.2](https://github.com/form-atoms/field/compare/v5.3.1...v5.3.2) (2025-10-17)