fix(SelectWidget): use real enum values for option values when nameGenerator is active (#5004)

* fix(SelectWidget): use real enum values for option values when nameGenerator is active

When htmlName is present (nameGenerator enabled), SelectWidget rendered option values as array indices (0, 1, 2) instead of real enum values (e.g. "active", "inactive"). This broke native form submission since the POSTed value was the index, not the actual value. Fixes all 10 themes.

* fix(SelectWidget): render empty string for undefined values instead of undefined

* fix(SelectWidget): streamline value handling for real and enumerated options

* fix(SelectWidget): use real enum values in <option value> with data-index for typed resolution

Replace index-based <option value="0"> with real enum values <option value="real_value"> so that native form submission sends meaningful values. Add data-index attribute to preserve typed value resolution via enumOptionsValueForIndex in JS handlers.

Scope limited to core and react-bootstrap (native <select> packages). Custom component packages (chakra, mui, mantine, etc.) are unchanged as they don't participate in native form submission.

* feat(widgets): add opt-in useRealOptionValues for native form submission

Add enumOptionValueEncoder/Decoder utilities to @rjsf/utils that allow rendering real enum values in option attributes instead of array indices. Controlled via ui:globalOptions or per-field ui:options.

When enabled, primitives use String(value) for DOM attributes with reverse lookup decoding. Objects/arrays fall back to index encoding. Default behavior (index-based) is fully preserved.

Applied across SelectWidget, RadioWidget, and CheckboxesWidget in all 10 theme packages.

* fix(SelectWidget, RadioWidget): ensure enum option values are converted to strings before processing

* Update packages/utils/src/enumOptionValueDecoder.ts

Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>

* Update packages/utils/test/enumOptionValueDecoder.test.ts

Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>

* Update packages/utils/test/enumOptionValueEncoder.test.ts

Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>

* fix(enumOptionValueDecoder): add test for handling undefined enumOptions

* feat(SelectWidget, utils): implement real enum value rendering and add new utilities for select options

* fix: Update snapshots

* feat(antd): add opt-in useRealOptionValues support

* feat(utils): rename useRealOptionValues to optionValueFormat

Replace the boolean flag with a 'indexed' | 'realValue'  union on GlobalUISchemaOptions for consistency with other option-style APIs in RJSF. Add an OptionValueFormat type and update the encoder, decoder, and selectedValue utilities to take a format parameter that defaults to 'indexed'.

* docs(uiSchema): add optionValueFormat section to describe enum value encoding

* refactor(utils): add getOptionValueFormat resolver helper

* refactor(chakra-ui,mui): use enumOptionSelectedValue in Radio/Checkboxes

* refactor(chakra-ui): unify SelectWidget formValue via enumOptionSelectedValue

* refactor(select-widget): comment about flatten `formValue` structure for Chakra and DaisyUI SelectWidgets

* refactor(mantine): split SelectWidget into Select/MultiSelect branches

Replace the `Component = multiple ? MultiSelect : Select` pattern with two explicit JSX branches sharing a common props object. Each branch passes its own narrow value type (`string[]` for MultiSelect, `string | null` for Select), dropping both the `as any` cast and the `multiple ? [] : null` conditional on enumOptionSelectedValue's emptyValue argument.

* refactor: address second-round review comments

---------

Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>

Author: nlemoine

CHANGELOG.md

@@ -28,6 +28,7 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/chakra-ui
 
 - Added `key={label}` to key input in `WrapIfAdditionalTemplate` to reset input value after duplicate key rename ([#4999](https://github.com/rjsf-team/react-jsonschema-form/issues/4999))
+- Added opt-in `optionValueFormat: 'realValue'` support to `SelectWidget`, `RadioWidget`, and `CheckboxesWidget` ([#4693](https://github.com/rjsf-team/react-jsonschema-form/issues/4693))
 
 ## @rjsf/core
 
@@ -36,39 +37,48 @@ should change the heading of the (upcoming) version to include a major version b
 - Fixed focus being lost when renaming additional property keys by preserving React key for renamed properties ([#4999](https://github.com/rjsf-team/react-jsonschema-form/issues/4999))
 - Removed `expandUiSchemaDefinitions` call at form init, now handled at runtime by `resolveUiSchema`, fixing [#4986](https://github.com/rjsf-team/react-jsonschema-form/issues/4986)
 - Used `useRef` to track latest `formData` in `handleKeyRename`, preventing stale closure data when multiple additional property keys are renamed in quick succession, fixing [#5021](https://github.com/rjsf-team/react-jsonschema-form/issues/5021)
+- Added opt-in `optionValueFormat: 'realValue'` support to `SelectWidget`, `RadioWidget`, and `CheckboxesWidget` for rendering real enum values in DOM attributes instead of array indices ([#4693](https://github.com/rjsf-team/react-jsonschema-form/issues/4693))
 
 ## @rjsf/daisyui
 
 - Added `key={label}` to key input in `WrapIfAdditionalTemplate` to reset input value after duplicate key rename ([#4999](https://github.com/rjsf-team/react-jsonschema-form/issues/4999))
+- Added opt-in `optionValueFormat: 'realValue'` support to `SelectWidget`, `RadioWidget`, and `CheckboxesWidget` ([#4693](https://github.com/rjsf-team/react-jsonschema-form/issues/4693))
 
 ## @rjsf/fluentui-rc
 
 - Added `key={label}` to key input in `WrapIfAdditionalTemplate` to reset input value after duplicate key rename ([#4999](https://github.com/rjsf-team/react-jsonschema-form/issues/4999))
+- Added opt-in `optionValueFormat: 'realValue'` support to `SelectWidget`, `RadioWidget`, and `CheckboxesWidget` ([#4693](https://github.com/rjsf-team/react-jsonschema-form/issues/4693))
 
 ## @rjsf/mantine
 
 - Added `key={label}` to key input in `WrapIfAdditionalTemplate` to reset input value after duplicate key rename ([#4999](https://github.com/rjsf-team/react-jsonschema-form/issues/4999))
 - Updated `BaseInputTemplate` to destructure and guard `min`/`max` before spreading onto `NumberInput`, fixing a build error caused by the widened `InputPropsType` (`number | string`)
+- Added opt-in `optionValueFormat: 'realValue'` support to `SelectWidget`, `RadioWidget`, and `CheckboxesWidget` ([#4693](https://github.com/rjsf-team/react-jsonschema-form/issues/4693))
 
 ## @rjsf/mui
 
 - Added `key={label}` to key input in `WrapIfAdditionalTemplate` to reset input value after duplicate key rename ([#4999](https://github.com/rjsf-team/react-jsonschema-form/issues/4999))
+- Added opt-in `optionValueFormat: 'realValue'` support to `SelectWidget`, `RadioWidget`, and `CheckboxesWidget` ([#4693](https://github.com/rjsf-team/react-jsonschema-form/issues/4693))
 
 ## @rjsf/primereact
 
 - Added `key={label}` to key input in `WrapIfAdditionalTemplate` to reset input value after duplicate key rename ([#4999](https://github.com/rjsf-team/react-jsonschema-form/issues/4999))
+- Added opt-in `optionValueFormat: 'realValue'` support to `SelectWidget`, `RadioWidget`, and `CheckboxesWidget` ([#4693](https://github.com/rjsf-team/react-jsonschema-form/issues/4693))
 
 ## @rjsf/react-bootstrap
 
 - Added `key={label}` to key input in `WrapIfAdditionalTemplate` to reset input value after duplicate key rename ([#4999](https://github.com/rjsf-team/react-jsonschema-form/issues/4999))
+- Added opt-in `optionValueFormat: 'realValue'` support to `SelectWidget`, `RadioWidget`, and `CheckboxesWidget` ([#4693](https://github.com/rjsf-team/react-jsonschema-form/issues/4693))
 
 ## @rjsf/semantic-ui
 
 - Added `key={label}` to key input in `WrapIfAdditionalTemplate` to reset input value after duplicate key rename ([#4999](https://github.com/rjsf-team/react-jsonschema-form/issues/4999))
+- Added opt-in `optionValueFormat: 'realValue'` support to `SelectWidget`, `RadioWidget`, and `CheckboxesWidget` ([#4693](https://github.com/rjsf-team/react-jsonschema-form/issues/4693))
 
 ## @rjsf/shadcn
 
 - Added `key={label}` to key input in `WrapIfAdditionalTemplate` to reset input value after duplicate key rename ([#4999](https://github.com/rjsf-team/react-jsonschema-form/issues/4999))
+- Added opt-in `optionValueFormat: 'realValue'` support to `SelectWidget`, `RadioWidget`, and `CheckboxesWidget` ([#4693](https://github.com/rjsf-team/react-jsonschema-form/issues/4693))
 
 ## @rjsf/mui
 
@@ -80,6 +90,8 @@ should change the heading of the (upcoming) version to include a major version b
 - Updated `InputPropsType` to widen `min` and `max` to `number | string` to support date values (e.g. `"2020-01-01"`)
 - Updated `getInputProps()` to propagate `formatMinimum` and `formatMaximum` schema keywords to the HTML `min`/`max` attributes for `date`, `datetime-local`, `time`, `week`, and `month` input types, aligning browser-native date picker constraints with AJV validation
 - Fixed `ui:title` from `ui:definitions` not applied to `oneOf`/`anyOf` dropdowns beyond first recursion level, fixing [#4986](https://github.com/rjsf-team/react-jsonschema-form/issues/4986)
+- Added `enumOptionValueEncoder`, `enumOptionValueDecoder`, and `enumOptionSelectedValue` utilities for opt-in real enum value rendering in select/radio/checkbox widgets ([#4693](https://github.com/rjsf-team/react-jsonschema-form/issues/4693))
+- Added `optionValueFormat: 'indexed' | 'realValue'` to `GlobalUISchemaOptions` and the `OptionValueFormat` type for opt-in real enum values in widget DOM attributes ([#4693](https://github.com/rjsf-team/react-jsonschema-form/issues/4693))
 
 # @rjsf/validator-ajv8
 

packages/antd/src/widgets/CheckboxesWidget/index.tsx

@@ -2,8 +2,10 @@ import { FocusEvent } from 'react';
 import { Checkbox } from 'antd';
 import {
   ariaDescribedByIds,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
   optionId,
   FormContextType,
   WidgetProps,
@@ -38,14 +40,16 @@ export default function CheckboxesWidget<
   const { readonlyAsDisabled = true } = formContext as GenericObjectType;
 
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
 
-  const handleChange = (nextValue: any) => onChange(enumOptionsValueForIndex<S>(nextValue, enumOptions, emptyValue));
+  const handleChange = (nextValue: any) =>
+    onChange(enumOptionValueDecoder<S>(nextValue, enumOptions, optionValueFormat, emptyValue));
 
   const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(target.value, enumOptions, emptyValue));
+    onBlur(id, enumOptionValueDecoder<S>(target.value, enumOptions, optionValueFormat, emptyValue));
 
   const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(target.value, enumOptions, emptyValue));
+    onFocus(id, enumOptionValueDecoder<S>(target.value, enumOptions, optionValueFormat, emptyValue));
 
   // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
   // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
@@ -55,15 +59,15 @@ export default function CheckboxesWidget<
     onFocus: !readonly ? handleFocus : undefined,
   };
 
-  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, true) as string[];
+  const selectValue = enumOptionSelectedValue<S>(value, enumOptions, true, optionValueFormat, []) as string[];
 
   return Array.isArray(enumOptions) && enumOptions.length > 0 ? (
     <>
       <Checkbox.Group
         disabled={disabled || (readonlyAsDisabled && readonly)}
         name={htmlName || id}
         onChange={!readonly ? handleChange : undefined}
-        value={selectedIndexes}
+        value={selectValue}
         {...extraProps}
         aria-describedby={ariaDescribedByIds(id)}
       >
@@ -75,7 +79,7 @@ export default function CheckboxesWidget<
                 name={htmlName || id}
                 autoFocus={i === 0 ? autofocus : false}
                 disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1}
-                value={String(i)}
+                value={enumOptionValueEncoder(option.value, i, optionValueFormat)}
               >
                 {option.label}
               </Checkbox>

packages/antd/src/widgets/RadioWidget/index.tsx

@@ -2,8 +2,10 @@ import { FocusEvent } from 'react';
 import { Radio, RadioChangeEvent } from 'antd';
 import {
   ariaDescribedByIds,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
   optionId,
   FormContextType,
   GenericObjectType,
@@ -34,17 +36,18 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   const { readonlyAsDisabled = true } = formContext as GenericObjectType;
 
   const { enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
 
   const handleChange = ({ target: { value: nextValue } }: RadioChangeEvent) =>
-    onChange(enumOptionsValueForIndex<S>(nextValue, enumOptions, emptyValue));
+    onChange(enumOptionValueDecoder<S>(nextValue, enumOptions, optionValueFormat, emptyValue));
 
   const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+    onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
 
   const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+    onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
 
-  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions) as string;
+  const selectValue = enumOptionSelectedValue<S>(value, enumOptions, false, optionValueFormat, emptyValue);
 
   return (
     <Radio.Group
@@ -54,7 +57,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
       onChange={!readonly ? handleChange : undefined}
       onBlur={!readonly ? handleBlur : undefined}
       onFocus={!readonly ? handleFocus : undefined}
-      value={selectedIndexes}
+      value={selectValue}
       aria-describedby={ariaDescribedByIds(id)}
     >
       {Array.isArray(enumOptions) &&
@@ -65,7 +68,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
             autoFocus={i === 0 ? autofocus : false}
             disabled={disabled || (Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1)}
             key={i}
-            value={String(i)}
+            value={enumOptionValueEncoder(option.value, i, optionValueFormat)}
           >
             {option.label}
           </Radio>

packages/antd/src/widgets/SelectWidget/index.tsx

@@ -2,8 +2,10 @@ import { useMemo, useState } from 'react';
 import { Select, SelectProps } from 'antd';
 import {
   ariaDescribedByIds,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
   FormContextType,
   GenericObjectType,
   RJSFSchema,
@@ -47,12 +49,14 @@ export default function SelectWidget<
   const { readonlyAsDisabled = true } = formContext as GenericObjectType;
 
   const { enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
 
-  const handleChange = (nextValue: any) => onChange(enumOptionsValueForIndex<S>(nextValue, enumOptions, emptyValue));
+  const handleChange = (nextValue: any) =>
+    onChange(enumOptionValueDecoder<S>(nextValue, enumOptions, optionValueFormat, emptyValue));
 
-  const handleBlur = () => onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+  const handleBlur = () => onBlur(id, enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
 
-  const handleFocus = () => onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+  const handleFocus = () => onFocus(id, enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
 
   const filterOption: SelectProps['filterOption'] = (input, option) => {
     if (option && isString(option.label)) {
@@ -64,7 +68,7 @@ export default function SelectWidget<
 
   const getPopupContainer = SelectWidget.getPopupContainerCallback();
 
-  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
+  const selectValue = enumOptionSelectedValue<S>(value, enumOptions, !!multiple, optionValueFormat, emptyValue);
 
   // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
   // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
@@ -79,7 +83,7 @@ export default function SelectWidget<
       const options: DefaultOptionType[] = enumOptions.map(({ value: optionValue, label: optionLabel }, index) => ({
         disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(optionValue) !== -1,
         key: String(index),
-        value: String(index),
+        value: enumOptionValueEncoder(optionValue, index, optionValueFormat),
         label: optionLabel,
       }));
 
@@ -89,7 +93,7 @@ export default function SelectWidget<
       return options;
     }
     return undefined;
-  }, [enumDisabled, enumOptions, placeholder, showPlaceholderOption]);
+  }, [enumDisabled, enumOptions, placeholder, showPlaceholderOption, optionValueFormat]);
 
   return (
     <Select
@@ -104,7 +108,7 @@ export default function SelectWidget<
       onFocus={!readonly ? handleFocus : undefined}
       placeholder={placeholder}
       style={SELECT_STYLE}
-      value={selectedIndexes}
+      value={selectValue}
       {...extraProps}
       // When the open change is called, set the open state, needed so that the select opens properly in the playground
       onOpenChange={setOpen}

packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -1,8 +1,10 @@
 import { CheckboxGroup, FieldsetRoot, Stack, Text, FieldsetLegend } from '@chakra-ui/react';
 import {
   ariaDescribedByIds,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
   FormContextType,
   optionId,
   RJSFSchema,
@@ -37,14 +39,15 @@ export default function CheckboxesWidget<
     uiSchema,
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
 
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement | any>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+    onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement | any>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+    onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
 
   const row = options ? options.inline : false;
-  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, true) as string[];
+  const selectValue = enumOptionSelectedValue<S>(value, enumOptions, true, optionValueFormat, []) as string[];
 
   const chakraProps = getChakra({ uiSchema });
 
@@ -57,8 +60,10 @@ export default function CheckboxesWidget<
     >
       {!hideLabel && label && <FieldsetLegend>{labelValue(label)}</FieldsetLegend>}
       <CheckboxGroup
-        onValueChange={(option) => onChange(enumOptionsValueForIndex<S>(option, enumOptions, emptyValue))}
-        value={selectedIndexes}
+        onValueChange={(option) =>
+          onChange(enumOptionValueDecoder<S>(option, enumOptions, optionValueFormat, emptyValue))
+        }
+        value={selectValue}
         aria-describedby={ariaDescribedByIds(id)}
         readOnly={readonly}
         invalid={required && value.length === 0}
@@ -72,7 +77,7 @@ export default function CheckboxesWidget<
                   key={index}
                   id={optionId(id, index)}
                   name={htmlName || id}
-                  value={String(index)}
+                  value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
                   disabled={disabled || itemDisabled || readonly}
                   onBlur={_onBlur}
                   onFocus={_onFocus}

packages/chakra-ui/src/RadioWidget/RadioWidget.tsx

@@ -2,8 +2,10 @@ import { ChangeEvent, FocusEvent } from 'react';
 import { Stack } from '@chakra-ui/react';
 import {
   ariaDescribedByIds,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
   labelValue,
   optionId,
   FormContextType,
@@ -32,16 +34,17 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   uiSchema,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
 
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
-    onChange(enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+    onChange(enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
   const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+    onBlur(id, enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
   const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+    onFocus(id, enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
 
   const row = options ? options.inline : false;
-  const selectedIndex = (enumOptionsIndexForValue<S>(value, enumOptions) as string) ?? null;
+  const selectValue = enumOptionSelectedValue<S>(value, enumOptions, false, optionValueFormat, null);
 
   const chakraProps = getChakra({ uiSchema });
 
@@ -58,7 +61,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         onChange={_onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
-        value={selectedIndex}
+        value={selectValue}
         name={htmlName || id}
         aria-describedby={ariaDescribedByIds(id)}
       >
@@ -69,7 +72,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
 
               return (
                 <Radio
-                  value={String(index)}
+                  value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
                   key={index}
                   id={optionId(id, index)}
                   disabled={disabled || itemDisabled || readonly}