diff --git a/src/components/form/form/form.stories.tsx b/src/components/form/form/form.stories.tsx
index 56c396e4..ba3db40b 100644
--- a/src/components/form/form/form.stories.tsx
+++ b/src/components/form/form/form.stories.tsx
@@ -26,8 +26,14 @@ export const FormComponent: Story = {
     fields: [
       { label: "First name", name: "first_name", required: true },
       { label: "Last name", name: "last_name", required: true },
+      { label: "Age", name: "age", type: "number", required: true },
       { label: "Address", name: "address", required: true },
-      { label: "Address (addition)", name: "address", required: true },
+      {
+        label: "Address (addition)",
+        name: "address",
+        type: "number",
+        required: true,
+      },
       { label: "Date of birth", name: "date_of_birth", type: "date" },
       {
         label: "Select school year",
@@ -62,6 +68,12 @@ export const FormComponent: Story = {
           { label: "No", value: "no" },
         ],
       },
+      {
+        label: "I have read and accept the terms and conditions",
+        name: "accept_tos",
+        type: "checkbox",
+        required: true,
+      },
     ],
     validate: validateForm,
     validateOnChange: true,
@@ -70,12 +82,18 @@ export const FormComponent: Story = {
     const canvas = within(canvasElement);
     const firstName = canvas.getByLabelText("First name");
     const lastName = canvas.getByLabelText("Last name");
+    const age = canvas.getByLabelText("Age");
     const schoolYear = canvas.getByLabelText("Select school year");
     const address = canvas.getByLabelText("Address");
     const address_addition = canvas.getByLabelText("Address (addition)");
     const dateOfBirth = canvas.getByLabelText("Date of birth");
     const english = canvas.getByLabelText("English");
     const math = canvas.getByLabelText("Math");
+    const yes = canvas.getByLabelText("Yes");
+    const no = canvas.getByLabelText("No");
+    const acceptTos = canvas.getByLabelText(
+      "I have read and accept the terms and conditions",
+    );
 
     await userEvent.clear(firstName);
     await userEvent.type(firstName, "John", { delay: 10 });
@@ -83,6 +101,9 @@ export const FormComponent: Story = {
     await userEvent.clear(lastName);
     await userEvent.type(lastName, "Doe", { delay: 10 });
 
+    await userEvent.clear(age);
+    await userEvent.type(age, "33", { delay: 10 });
+
     await userEvent.click(schoolYear, { delay: 10 });
     const junior = await canvas.findByText("Junior");
     await userEvent.click(junior, { delay: 10 });
@@ -97,86 +118,44 @@ export const FormComponent: Story = {
     await userEvent.type(dateOfBirth, "2023-09-15", { delay: 10 });
     await userEvent.type(dateOfBirth, "{enter}");
 
+    await userEvent.click(schoolYear);
+    const senior = await canvas.findByText("Senior");
+    await userEvent.click(senior);
+
     await userEvent.click(english, { delay: 10 });
     await userEvent.click(math, { delay: 10 });
+
+    await userEvent.click(yes, { delay: 10 });
+    await userEvent.click(no, { delay: 10 });
+
+    await userEvent.click(acceptTos, { delay: 10 });
   },
 };
 
 export const TypedResults: Story = {
+  ...FormComponent,
   args: {
-    debug: true,
-    fields: [
-      { label: "Name", name: "name" },
-      { label: "Age", name: "age", type: "number" },
-      {
-        label: "Select school year",
-        name: "school_year",
-        options: [
-          { label: "Freshman" },
-          { label: "Sophomore" },
-          { label: "Junior" },
-          { label: "Senior" },
-          { label: "Graduate" },
-        ],
-      },
-      {
-        label: "Select courses",
-        name: "courses",
-        type: "checkbox",
-        required: true,
-        options: [
-          { label: "English", value: "english" },
-          { label: "Math", value: "math" },
-          { label: "Science", value: "science" },
-        ],
-      },
-      {
-        label: "Receive newsletter",
-        name: "subscribe_newsletter",
-        type: "radio",
-        required: true,
-        options: [
-          { label: "Yes", value: "yes" },
-          { label: "No", value: "no" },
-        ],
-      },
-    ],
+    ...FormComponent.args,
     useTypedResults: true,
-    validate: validateForm,
-    validateOnChange: true,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const name = canvas.getByLabelText("Name");
-    const age = canvas.getByLabelText("Age");
-    const schoolYear = canvas.getByLabelText("Select school year");
-    const english = canvas.getByLabelText("English");
-    const math = canvas.getByLabelText("Math");
-    const newsletter = canvas.getByLabelText("Receive newsletter");
-
-    await userEvent.clear(name);
-    await userEvent.type(name, "John", { delay: 10 });
-
-    await userEvent.clear(age);
-    await userEvent.type(age, "33", { delay: 10 });
-
-    await userEvent.click(schoolYear, { delay: 10 });
-    const junior = await canvas.findByText("Junior");
-    await userEvent.click(junior, { delay: 10 });
-
-    await userEvent.click(english, { delay: 10 });
-    await userEvent.click(math, { delay: 10 });
-    await userEvent.click(newsletter, { delay: 10 });
   },
 };
 
 export const UsageWithFormik: Story = {
   ...FormComponent,
   args: {
-    ...FormComponent.args,
+    debug: true,
     fields: [
       { label: "First name", name: "first_name", required: true },
       { label: "Last name", name: "last_name", required: true },
+      { label: "Age", name: "age", type: "number", required: true },
+      { label: "Address", name: "address[0]", required: true },
+      {
+        label: "Address (addition)",
+        name: "address[1]",
+        type: "number",
+        required: true,
+      },
+      { label: "Date of birth", name: "date_of_birth", type: "date" },
       {
         label: "Select school year",
         name: "school_year",
@@ -189,10 +168,6 @@ export const UsageWithFormik: Story = {
           { label: "Graduate" },
         ],
       },
-      { label: "Address", name: "address[0]", required: true },
-      { label: "Address (addition)", name: "address[1]", required: true },
-      { label: "Date of birth", name: "date_of_birth", type: "date" },
-
       {
         label: "Select courses",
         name: "courses",
@@ -214,7 +189,15 @@ export const UsageWithFormik: Story = {
           { label: "No", value: "no" },
         ],
       },
+      {
+        label: "I have read and accept the terms and conditions",
+        name: "accept_tos",
+        type: "checkbox",
+        required: true,
+      },
     ],
+    validate: validateForm,
+    validateOnChange: true,
   },
   render: (args) => {
     return (
diff --git a/src/components/form/input/input.tsx b/src/components/form/input/input.tsx
index 7363e759..bd58160b 100644
--- a/src/components/form/input/input.tsx
+++ b/src/components/form/input/input.tsx
@@ -75,9 +75,14 @@ export const Input: React.FC<InputProps> = ({
   // This conditionalizes the presence of the "value" props.
   const valueProps =
     type.toLowerCase() === "checkbox" || type.toLowerCase() === "radio"
-      ? { checked: props.checked, value: valueState }
-      : { value: valueState };
-
+      ? typeof value === "undefined"
+        ? {}
+        : {
+            value: value,
+          }
+      : {
+          value: valueState,
+        };
   const input = (
     <input
       ref={inputRef}
diff --git a/src/components/form/radio/radio.stories.tsx b/src/components/form/radio/radio.stories.tsx
index a99efcfe..23c359de 100644
--- a/src/components/form/radio/radio.stories.tsx
+++ b/src/components/form/radio/radio.stories.tsx
@@ -27,7 +27,7 @@ export const RadioComponent: Story = {
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
     const pre = await canvas.findByRole("log");
-    const input = canvas.getByLabelText(args.children);
+    const input = canvas.getByLabelText(args.children as string);
 
     // On
     await userEvent.click(input);
diff --git a/src/components/form/radio/radio.tsx b/src/components/form/radio/radio.tsx
index 7286b3a0..87c21b31 100644
--- a/src/components/form/radio/radio.tsx
+++ b/src/components/form/radio/radio.tsx
@@ -16,17 +16,13 @@ export type RadioProps = InputProps & {
  * @param props
  * @constructor
  */
-export const Radio: React.FC<RadioProps> = ({
-  children,
-  value,
-  checked,
-  ...props
-}) => {
+export const Radio: React.FC<RadioProps> = ({ children, value, ...props }) => {
   const id = useId();
   const _id = props.id || id;
+  const _props = value ? { ...props, value } : props;
   return (
     <div className="mykn-radio">
-      <Input id={_id} {...props} type="radio" value={value} checked={checked} />
+      <Input id={_id} {..._props} type="radio" />
       {children && (
         <Label bold={false} htmlFor={_id}>
           {children}
diff --git a/src/components/form/radio/radiogroup.stories.tsx b/src/components/form/radio/radiogroup.stories.tsx
index 4469ded7..0e739114 100644
--- a/src/components/form/radio/radiogroup.stories.tsx
+++ b/src/components/form/radio/radiogroup.stories.tsx
@@ -42,7 +42,7 @@ export const RadioGroupComponent: Story = {
 
     data = JSON.parse(pre?.textContent || "{}");
 
-    await expect(data.school_year[0]).toEqual("Graduate");
+    await expect(data.school_year).toEqual("Graduate");
 
     await inputs
       .filter((_, i) => i % 2 !== 0)
@@ -53,6 +53,6 @@ export const RadioGroupComponent: Story = {
       );
 
     data = JSON.parse(pre?.textContent || "{}");
-    await expect(data.school_year[0]).toEqual("Senior");
+    await expect(data.school_year).toEqual("Senior");
   },
 };
diff --git a/src/components/form/radio/radiogroup.tsx b/src/components/form/radio/radiogroup.tsx
index 7dd551cb..2bf19073 100644
--- a/src/components/form/radio/radiogroup.tsx
+++ b/src/components/form/radio/radiogroup.tsx
@@ -17,19 +17,19 @@ export const RadioGroup: React.FC<RadioGroupProps> = ({
 }) => {
   const reactId = useId();
   const _id = id || reactId;
-  const [selectedValue, setSelectedValue] = useState<
+  const [selectedValueState, setSelectedValueState] = useState<
     string | number | undefined
-  >(options.find((option) => option.selected)?.value);
+  >();
 
   useEffect(() => {
     const initialSelected = options.find((option) => option.selected)?.value;
     if (initialSelected !== undefined) {
-      setSelectedValue(initialSelected);
+      setSelectedValueState(initialSelected);
     }
   }, [options]);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedValue(event.target.value);
+    setSelectedValueState(event.target.value);
     onChange?.(event);
   };
 
@@ -46,7 +46,7 @@ export const RadioGroup: React.FC<RadioGroupProps> = ({
             name={name}
             value={optionValue}
             variant={variant}
-            checked={selectedValue === optionValue}
+            checked={selectedValueState === optionValue}
             onChange={handleChange}
           >
             {option.label}
diff --git a/src/lib/form/utils.ts b/src/lib/form/utils.ts
index 8c7af92e..6bc6a605 100644
--- a/src/lib/form/utils.ts
+++ b/src/lib/form/utils.ts
@@ -25,11 +25,19 @@ export const serializeForm = (
   const entries = Array.from(formData.entries());
 
   const data = entries.reduce<SerializedFormData>((acc, [name, value]) => {
-    const nameMultipleTimesInForm =
-      [...form.elements].filter((n) => n.getAttribute("name") === name).length >
-      1;
-
-    if (nameMultipleTimesInForm) {
+    const inputsMatchingName = [...form.elements].filter(
+      (n) => n.getAttribute("name") === name,
+    ) as Array<
+      | HTMLButtonElement
+      | HTMLInputElement
+      | HTMLSelectElement
+      | HTMLTextAreaElement
+    >;
+    const nameMultipleTimesInForm = inputsMatchingName.length > 1;
+    // Edge case: radio can possibly have more than one DOM element representing a single value.
+    const isRadio = inputsMatchingName.every((i) => i.type === "radio");
+
+    if (nameMultipleTimesInForm && !isRadio) {
       // Key is already set on (serialized) `acc`, replace it with an `Array`.
       const existingValue = acc[name];
 
@@ -42,7 +50,6 @@ export const serializeForm = (
       // Key is not yet set in (serialized) `acc`, set it.
       acc[name] = value;
     }
-
     return acc;
   }, {});
 
@@ -57,38 +64,64 @@ export const serializeForm = (
 const typeSerializedFormData = (
   form: HTMLFormElement,
   data: SerializedFormData,
-): SerializedFormData => {
-  return Object.fromEntries(
+) =>
+  Object.fromEntries(
     Object.entries(data).map(([key, value]) => {
-      const input = [...form.elements].find(
-        (n) => n.getAttribute("name") === key,
-      );
-      const typeAttribute = input?.getAttribute("type");
-      let constructor:
-        | ((value: Attribute | File) => Attribute | File)
-        | undefined;
-      let _value = value;
-
-      switch (typeAttribute) {
-        case "number":
-          constructor = Number;
-          break;
-        case "checkbox":
-          // If checkbox array is used, `true[]` might not be useful (only true values are serialized).
-          // TODO: Investigate more robust solution.
-          constructor = Array.isArray(value) ? undefined : Boolean;
-          break;
-      }
-
-      if (constructor) {
-        _value = Array.isArray(value)
-          ? value.map((v) => constructor?.(v) || v)
-          : constructor(value);
+      if (Array.isArray(value)) {
+        const values = value.map((v, index) => {
+          const constructor = getInputTypeConstructor(form, key, value, index);
+          return constructor ? constructor(v) : v;
+        });
+        return [key, values];
       }
 
+      const constructor = getInputTypeConstructor(form, key, value);
+      const _value = constructor ? constructor(value) : value;
       return [key, _value];
     }),
   );
+
+/**
+ * Returns a Function providing a constructor for a typed value (e.g. input[type="number"] -> Number) at the `index`
+ * occurrence of input matching `name` in `form`.
+ * @param form
+ * @param name
+ * @param value
+ * @param index
+ */
+export const getInputTypeConstructor = (
+  form: HTMLFormElement,
+  name: string,
+  value: unknown | unknown[],
+  index?: number,
+) => {
+  const type = getInputType(form, name, index);
+  switch (type) {
+    case "number":
+      return Number;
+    case "checkbox":
+      return Array.isArray(value) ? undefined : Boolean;
+  }
+};
+
+/**
+ * Returns the type of the `index` occurrence of input matching `name` in `form`.
+ * @param form
+ * @param name
+ * @param index
+ */
+export const getInputType = (
+  form: HTMLFormElement,
+  name: string,
+  index?: number,
+) => {
+  const inputs = [...form.elements].filter(
+    (n) => n.getAttribute("name") === name,
+  );
+  if (typeof index !== "undefined" && inputs.length > 1) {
+    return inputs[index]?.getAttribute("type");
+  }
+  return inputs[0]?.getAttribute("type");
 };
 
 /**