@availity/mui-controlled-form 1.2.9 → 1.3.0

package/src/lib/AsyncAutocomplete.tsx

@@ -1,7 +1,7 @@
 import { AsyncAutocomplete, AsyncAutocompleteProps } from '@availity/mui-autocomplete';
 import { RegisterOptions, FieldValues, Controller, useFormContext } from 'react-hook-form';
 import { ChipTypeMap } from '@mui/material/Chip';
-import { ControllerProps } from './Types';
+import { ControllerProps, TransformProp } from './Types';
 
 export type ControlledAsyncAutocompleteProps<
   Option,
@@ -9,12 +9,17 @@ export type ControlledAsyncAutocompleteProps<
   DisableClearable extends boolean | undefined,
   FreeSolo extends boolean | undefined,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+  Output = AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>['value'] | null,
 > = { defaultToFirstOption?: boolean; defaultToOnlyOption?: boolean } & Omit<
   AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>,
   'onBlur' | 'onChange' | 'value' | 'name'
 > &
   Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
-  ControllerProps;
+  ControllerProps &
+  TransformProp<
+    AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>['value'] | null,
+    Output
+  >;
 
 export const ControlledAsyncAutocomplete = <
   Option,
@@ -22,6 +27,7 @@ export const ControlledAsyncAutocomplete = <
   DisableClearable extends boolean | undefined = false,
   FreeSolo extends boolean | undefined = false,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+  Output = AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>['value'] | null,
 >({
   name,
   onBlur,
@@ -32,8 +38,9 @@ export const ControlledAsyncAutocomplete = <
   FieldProps,
   defaultToFirstOption,
   defaultToOnlyOption,
+  transform,
   ...rest
-}: ControlledAsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
+}: ControlledAsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent, Output>) => {
   const { setValue } = useFormContext();
   return (
     <Controller
@@ -61,12 +68,12 @@ export const ControlledAsyncAutocomplete = <
           }}
           onChange={(event, value, reason) => {
             if (reason === 'clear') {
-              onChange(null);
+              onChange(transform?.output?.(null) ?? null);
             }
-            onChange(value);
+            onChange(transform?.output?.(value) ?? value);
           }}
           onBlur={onBlur}
-          value={value || null}
+          value={transform?.input?.(value) ?? value ?? null}
           loadOptions={async (offset, limit, inputValue) => {
             const { options, hasMore, offset: returnedOffsetValue } = await rest.loadOptions(offset, limit, inputValue);
 

package/src/lib/Autocomplete.tsx

@@ -1,7 +1,7 @@
 import { Autocomplete, AutocompleteProps } from '@availity/mui-autocomplete';
 import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
 import { ChipTypeMap } from '@mui/material/Chip';
-import { ControllerProps } from './Types';
+import { ControllerProps, TransformProp } from './Types';
 
 export type ControlledAutocompleteProps<
   T,
@@ -9,12 +9,14 @@ export type ControlledAutocompleteProps<
   DisableClearable extends boolean | undefined,
   FreeSolo extends boolean | undefined,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+  Output = AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>['value'] | null,
 > = Omit<
   AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>,
   'onBlur' | 'onChange' | 'value' | 'name'
 > &
   Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
-  ControllerProps;
+  ControllerProps &
+  TransformProp<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>['value'] | null, Output>;
 
 export const ControlledAutocomplete = <
   T,
@@ -22,6 +24,7 @@ export const ControlledAutocomplete = <
   DisableClearable extends boolean | undefined = false,
   FreeSolo extends boolean | undefined = false,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+  Output = AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>['value'] | null,
 >({
   name,
   FieldProps,
@@ -31,8 +34,9 @@ export const ControlledAutocomplete = <
   onChange,
   shouldUnregister,
   value,
+  transform,
   ...rest
-}: ControlledAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
+}: ControlledAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent, Output>) => {
   return (
     <Controller
       name={name}
@@ -65,12 +69,12 @@ export const ControlledAutocomplete = <
           }}
           onChange={(event, value, reason) => {
             if (reason === 'clear') {
-              onChange(null);
+              onChange(transform?.output?.(null) ?? null);
             }
-            onChange(value);
+            onChange(transform?.output?.(value) ?? value);
           }}
           onBlur={onBlur}
-          value={value || null}
+          value={transform?.input?.(value) ?? value ?? null}
         />
       )}
     />

package/src/lib/Checkbox.tsx

@@ -1,12 +1,12 @@
 import { Checkbox, CheckboxProps } from '@availity/mui-checkbox';
 import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
-import { ControllerProps } from './Types';
+import { ControllerProps, TransformProp } from './Types';
 
-export type ControlledCheckboxProps = Omit<CheckboxProps, 'disabled' | 'onBlur' | 'onChange' | 'value' | 'name'> &
+export type ControlledCheckboxProps<Output = boolean> = Omit<CheckboxProps, 'disabled' | 'onBlur' | 'onChange' | 'value' | 'name'> &
   Pick<RegisterOptions<FieldValues, string>, 'disabled' | 'onBlur' | 'onChange' | 'value'> &
-  ControllerProps;
+  ControllerProps & TransformProp<boolean, Output>;
 
-export const ControlledCheckbox = ({
+export const ControlledCheckbox = <Output = boolean,>({
   name,
   disabled,
   onChange,
@@ -15,8 +15,9 @@ export const ControlledCheckbox = ({
   defaultValue = false,
   rules = {},
   shouldUnregister,
+  transform,
   ...rest
-}: ControlledCheckboxProps) => {
+}: ControlledCheckboxProps<Output>) => {
   return (
     <Controller
       name={name}
@@ -35,8 +36,8 @@ export const ControlledCheckbox = ({
           required={typeof rules.required === 'object' ? rules.required.value : !!rules.required}
           {...rest}
           {...field}
-          checked={field.value}
-          onChange={(e) => field.onChange(e.target.checked)}
+          checked={transform?.input?.(field.value) ?? field.value}
+          onChange={(e) => field.onChange(transform?.output?.(e.target.checked) ?? e.target.checked)}
         />
       )}
     />

package/src/lib/CodesAutocomplete.tsx

@@ -1,4 +1,4 @@
-import type { Code } from '@availity/mui-autocomplete';
+import type { AsyncAutocompleteProps, Code } from '@availity/mui-autocomplete';
 import { fetchCodes, handleGetCodesOptionLabel } from '@availity/mui-autocomplete';
 import { ApiConfig } from '@availity/api-axios';
 import { ChipTypeMap } from '@mui/material/Chip';
@@ -11,8 +11,12 @@ export interface ControlledCodesAutocompleteProps<
   DisableClearable extends boolean | undefined = false,
   FreeSolo extends boolean | undefined = false,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+  Output = AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>['value'] | null,
 > extends Omit<
-    Optional<ControlledAsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'queryKey'>,
+    Optional<
+      ControlledAsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent, Output>,
+      'queryKey'
+    >,
     'loadOptions'
   > {
   /** The code list id. */
@@ -21,22 +25,21 @@ export interface ControlledCodesAutocompleteProps<
   apiConfig?: ApiConfig;
 }
 
-export const ControlledCodesAutocomplete = ({
-  name,
-  defaultValue,
-  onBlur,
-  onChange,
-  rules = {},
-  shouldUnregister,
-  value,
-  FieldProps,
+export const ControlledCodesAutocomplete = <
+  Option = Code,
+  Multiple extends boolean | undefined = false,
+  DisableClearable extends boolean | undefined = false,
+  FreeSolo extends boolean | undefined = false,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+  Output = AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>['value'] | null,
+>({
   apiConfig = {},
   queryOptions,
   queryKey = 'codes-autocomplete',
   list,
   watchParams,
   ...rest
-}: ControlledCodesAutocompleteProps) => {
+}: ControlledCodesAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent, Output>) => {
   const handleLoadOptions = async (offset: number, limit: number, inputValue: string) => {
     const resp = await fetchCodes({
       ...apiConfig,
@@ -48,14 +51,6 @@ export const ControlledCodesAutocomplete = ({
 
   return (
     <ControlledAsyncAutocomplete
-      name={name}
-      defaultValue={defaultValue}
-      onBlur={onBlur}
-      onChange={onChange}
-      rules={rules}
-      shouldUnregister={shouldUnregister}
-      value={value}
-      FieldProps={FieldProps}
       getOptionLabel={handleGetCodesOptionLabel}
       queryKey={queryKey}
       queryOptions={{ enabled: !!list, ...queryOptions }}

package/src/lib/Datepicker.stories.tsx

@@ -6,17 +6,18 @@ import { Typography } from '@availity/mui-typography';
 import { Grid } from '@availity/mui-layout';
 import { AllControllerPropertiesCategorized, DatepickerPropsCategorized } from './Types';
 import { FormProvider, useForm } from '..';
+import dayjs, { Dayjs } from 'dayjs';
 
 const meta: Meta<typeof ControlledDatepicker> = {
   title: 'Form Components/Controlled Form/ControlledDatepicker',
   component: ControlledDatepicker,
   tags: ['autodocs'],
-  argTypes: {...AllControllerPropertiesCategorized, ...DatepickerPropsCategorized}
+  argTypes: { ...AllControllerPropertiesCategorized, ...DatepickerPropsCategorized },
 };
 
 export default meta;
 
-export const _ControlledInput: StoryObj<typeof ControlledDatepicker> = {
+export const _ControlledDatePicker: StoryObj<typeof ControlledDatepicker> = {
   render: (args: ControlledDatepickerProps) => {
     const methods = useForm();
 
@@ -25,15 +26,20 @@ export const _ControlledInput: StoryObj<typeof ControlledDatepicker> = {
         <form onSubmit={methods.handleSubmit((data) => data)}>
           <ControlledDatepicker {...args} />
           <Grid container direction="row" justifyContent="space-between" marginTop={1}>
-            <Button disabled={!methods?.formState?.isSubmitSuccessful} children="Reset" color="secondary" onClick={() => methods.reset()} />
+            <Button
+              disabled={!methods?.formState?.isSubmitSuccessful}
+              children="Reset"
+              color="secondary"
+              onClick={() => methods.reset()}
+            />
             <Button type="submit" disabled={methods?.formState?.isSubmitSuccessful} children="Submit" />
           </Grid>
-          { methods?.formState?.isSubmitSuccessful ? (
+          {methods?.formState?.isSubmitSuccessful ? (
             <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
               <Typography variant="h2">Submitted Values</Typography>
               <pre data-testid="result">{JSON.stringify(methods.getValues(), null, 2)}</pre>
             </Paper>
-          ) : null }
+          ) : null}
         </form>
       </FormProvider>
     );
@@ -48,3 +54,53 @@ export const _ControlledInput: StoryObj<typeof ControlledDatepicker> = {
     },
   },
 };
+
+export const _ControlledDatePickerTransform: StoryObj<typeof ControlledDatepicker> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'In this example, the underlying value is stored as a string in the form values, but the datepicker always receives a Dayjs object. The transform prop is used to convert the value to and from the format you want to store in the underlying form values. You can see the underlying value when submitting the form.',
+      },
+    },
+  },
+  render: (args: ControlledDatepickerProps) => {
+    const methods = useForm();
+
+    return (
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit((data) => data)}>
+          <ControlledDatepicker {...args} />
+          <Grid container direction="row" justifyContent="space-between" marginTop={1}>
+            <Button
+              disabled={!methods?.formState?.isSubmitSuccessful}
+              children="Reset"
+              color="secondary"
+              onClick={() => methods.reset()}
+            />
+            <Button type="submit" disabled={methods?.formState?.isSubmitSuccessful} children="Submit" />
+          </Grid>
+          {methods?.formState?.isSubmitSuccessful ? (
+            <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
+              <Typography variant="h2">Submitted Values</Typography>
+              <pre data-testid="result">{JSON.stringify(methods.getValues(), null, 2)}</pre>
+            </Paper>
+          ) : null}
+        </form>
+      </FormProvider>
+    );
+  },
+  args: {
+    transform: {
+      output: (value: Dayjs) => value?.format('LL'),
+      input: (value: string) => (value ? dayjs(value, 'LL') : null),
+    },
+    name: 'controlledDatepickerTransform',
+    FieldProps: {
+      fullWidth: false,
+      helperText: 'Help text for the field',
+      helpTopicId: '1234',
+      label: 'Date',
+    },
+  },
+};

package/src/lib/Datepicker.tsx

@@ -1,12 +1,17 @@
 import { Datepicker, DatepickerProps } from '@availity/mui-datepicker';
 import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
-import { ControllerProps } from './Types';
+import { ControllerProps, TransformProp } from './Types';
+import { Dayjs } from 'dayjs';
 
-export type ControlledDatepickerProps = Omit<DatepickerProps, 'onBlur' | 'onChange' | 'value' | 'name'> &
+export type ControlledDatepickerProps<Output = Dayjs | null> = Omit<
+  DatepickerProps,
+  'onBlur' | 'onChange' | 'value' | 'name'
+> &
   Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
-  ControllerProps;
+  ControllerProps &
+  TransformProp<Dayjs | null, Output>;
 
-export const ControlledDatepicker = ({
+export const ControlledDatepicker = <Output = Dayjs | null,>({
   name,
   defaultValue,
   onBlur,
@@ -15,8 +20,9 @@ export const ControlledDatepicker = ({
   shouldUnregister,
   value,
   FieldProps,
+  transform,
   ...rest
-}: ControlledDatepickerProps) => {
+}: ControlledDatepickerProps<Output>) => {
   return (
     <Controller
       name={name}
@@ -50,8 +56,8 @@ export const ControlledDatepicker = ({
               onBlur: onBlur,
             },
           }}
-          onChange={onChange}
-          value={value || null}
+          onChange={(e) => onChange(transform?.output?.(e) ?? e)}
+          value={transform?.input?.(value) ?? value ?? null}
         />
       )}
     />

package/src/lib/Input.tsx

@@ -1,12 +1,13 @@
 import { Input, InputProps } from '@availity/mui-form-utils';
 import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
-import { ControllerProps } from './Types';
+import { ControllerProps, TransformProp } from './Types';
 
-export type ControlledInputProps = Omit<InputProps, 'onBlur' | 'onChange' | 'value' | 'name'> &
+export type ControlledInputProps<Output = string> = Omit<InputProps, 'onBlur' | 'onChange' | 'value' | 'name'> &
   Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
-  ControllerProps;
+  ControllerProps &
+  TransformProp<string, Output>;
 
-export const ControlledInput = ({
+export const ControlledInput = <Output = string,>({
   name,
   defaultValue,
   disabled,
@@ -15,8 +16,9 @@ export const ControlledInput = ({
   rules = {},
   shouldUnregister,
   value,
+  transform,
   ...rest
-}: ControlledInputProps) => {
+}: ControlledInputProps<Output>) => {
   return (
     <Controller
       name={name}
@@ -35,6 +37,8 @@ export const ControlledInput = ({
           required={typeof rules.required === 'object' ? rules.required.value : !!rules.required}
           {...rest}
           {...field}
+          onChange={(e) => field.onChange(transform?.output?.(e.target.value) ?? e)}
+          value={transform?.input?.(field.value) ?? field.value ?? ''}
           error={!!error}
         />
       )}

package/src/lib/OrganizationAutocomplete.tsx

@@ -1,4 +1,4 @@
-import type { Organization } from '@availity/mui-autocomplete';
+import type { AsyncAutocompleteProps, Organization } from '@availity/mui-autocomplete';
 import { handleGetOrgOptionLabel, fetchOrgs } from '@availity/mui-autocomplete';
 import type { ChipTypeMap } from '@mui/material/Chip';
 import type { ApiConfig } from '@availity/api-axios';
@@ -11,27 +11,30 @@ export interface ControlledOrgAutocompleteProps<
   DisableClearable extends boolean | undefined = false,
   FreeSolo extends boolean | undefined = false,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+  Output = AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>['value'] | null,
 > extends Omit<
-    Optional<ControlledAsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'queryKey'>,
+    Optional<
+      ControlledAsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent, Output>,
+      'queryKey'
+    >,
     'loadOptions'
   > {
   /** Axios ApiConfig */
   apiConfig?: ApiConfig;
 }
 
-export const ControlledOrganizationAutocomplete = ({
-  name,
-  defaultValue,
-  onBlur,
-  onChange,
-  rules = {},
-  shouldUnregister,
-  value,
-  FieldProps,
+export const ControlledOrganizationAutocomplete = <
+  Option = Organization,
+  Multiple extends boolean | undefined = false,
+  DisableClearable extends boolean | undefined = false,
+  FreeSolo extends boolean | undefined = false,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+  Output = AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>['value'] | null,
+>({
   queryKey = 'org-autocomplete',
   apiConfig = {},
   ...rest
-}: ControlledOrgAutocompleteProps) => {
+}: ControlledOrgAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent, Output>) => {
   const handleLoadOptions = async (offset: number, limit: number) => {
     const resp = await fetchOrgs({ ...apiConfig, params: { dropdown: true, ...apiConfig.params, offset, limit } });
 
@@ -39,14 +42,6 @@ export const ControlledOrganizationAutocomplete = ({
   };
   return (
     <ControlledAsyncAutocomplete
-      name={name}
-      defaultValue={defaultValue}
-      onBlur={onBlur}
-      onChange={onChange}
-      rules={rules}
-      shouldUnregister={shouldUnregister}
-      value={value}
-      FieldProps={FieldProps}
       getOptionLabel={handleGetOrgOptionLabel}
       queryKey={queryKey}
       {...rest}

package/src/lib/ProviderAutocomplete.tsx

@@ -1,4 +1,4 @@
-import type { Provider } from '@availity/mui-autocomplete';
+import type { AsyncAutocompleteProps, Provider } from '@availity/mui-autocomplete';
 import { handleGetProviderOptionLabel, fetchProviders } from '@availity/mui-autocomplete';
 import type { ChipTypeMap } from '@mui/material/Chip';
 import type { Optional } from './utils';
@@ -11,8 +11,9 @@ export interface ControlledProviderAutocompleteProps<
   DisableClearable extends boolean | undefined = false,
   FreeSolo extends boolean | undefined = false,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+  Output = AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>['value'] | null,
 > extends Omit<
-    Optional<ControlledAsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'queryKey'>,
+    Optional<ControlledAsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent, Output>, 'queryKey'>,
     'loadOptions'
   > {
   /** Customer ID of the Organization you are requesting the providers for */
@@ -21,20 +22,19 @@ export interface ControlledProviderAutocompleteProps<
   apiConfig?: ApiConfig;
 }
 
-export const ControlledProviderAutocomplete = ({
-  name,
-  defaultValue,
-  onBlur,
-  onChange,
-  rules = {},
-  shouldUnregister,
-  value,
-  FieldProps,
+export const ControlledProviderAutocomplete = <
+  Option = Provider,
+  Multiple extends boolean | undefined = false,
+  DisableClearable extends boolean | undefined = false,
+  FreeSolo extends boolean | undefined = false,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+  Output = AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>['value'] | null,
+>({
   apiConfig = {},
   customerId,
   queryKey = 'prov-autocomplete',
   ...rest
-}: ControlledProviderAutocompleteProps) => {
+}: ControlledProviderAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent, Output>) => {
   const handleLoadOptions = async (offset: number, limit: number, inputValue: string) => {
     const resp = await fetchProviders(customerId, {
       ...apiConfig,
@@ -45,14 +45,6 @@ export const ControlledProviderAutocomplete = ({
   };
   return (
     <ControlledAsyncAutocomplete
-      name={name}
-      defaultValue={defaultValue}
-      onBlur={onBlur}
-      onChange={onChange}
-      rules={rules}
-      shouldUnregister={shouldUnregister}
-      value={value}
-      FieldProps={FieldProps}
       getOptionLabel={handleGetProviderOptionLabel}
       queryOptions={{ enabled: !!customerId }}
       queryKey={queryKey}

package/src/lib/RadioGroup.tsx

@@ -1,18 +1,19 @@
 import { FormControlProps, RadioGroup, RadioGroupProps } from '@availity/mui-form-utils';
 import { Controller, RegisterOptions, FieldValues } from 'react-hook-form';
 import { FormControl, FormLabel, FormHelperText } from '@availity/mui-form-utils';
-import { ControllerProps } from './Types';
+import { ControllerProps, TransformProp } from './Types';
 
-export type ControlledRadioGroupProps = {
+export type ControlledRadioGroupProps<Output = string> = {
   name: string;
   label: string;
   helperText?: string;
 } & Omit<RadioGroupProps, 'onBlur' | 'onChange' | 'value' | 'name'> &
   Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
   ControllerProps &
+  TransformProp<string, Output> &
   Pick<FormControlProps, 'required'>;
 
-export const ControlledRadioGroup = ({
+export const ControlledRadioGroup = <Output = string,>({
   name,
   helperText,
   label,
@@ -23,8 +24,9 @@ export const ControlledRadioGroup = ({
   rules = {},
   shouldUnregister,
   value,
+  transform,
   ...rest
-}: ControlledRadioGroupProps) => {
+}: ControlledRadioGroupProps<Output>) => {
   return (
     <Controller
       name={name}
@@ -38,7 +40,12 @@ export const ControlledRadioGroup = ({
           required={!!required || (typeof rules.required === 'object' ? rules.required.value : !!rules.required)}
         >
           <FormLabel>{label}</FormLabel>
-          <RadioGroup {...field} {...rest} />
+          <RadioGroup
+            {...field}
+            onChange={(e) => field.onChange(transform?.output?.(e.target.value) ?? e)}
+            value={transform?.input?.(field.value) ?? field.value ?? ''}
+            {...rest}
+          />
           <FormHelperText>
             {error?.message ? (
               <>

package/src/lib/Select.tsx

@@ -1,12 +1,16 @@
 import { Select, SelectProps } from '@availity/mui-form-utils';
 import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
-import { ControllerProps } from './Types';
+import { ControllerProps, TransformProp } from './Types';
 
-export type ControlledSelectProps = Omit<SelectProps, 'onBlur' | 'onChange' | 'value' | 'name'> &
+export type ControlledSelectProps<Output = string, Input = unknown> = Omit<
+  SelectProps<Input>,
+  'onBlur' | 'onChange' | 'value' | 'name'
+> &
   Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
-  ControllerProps;
+  ControllerProps &
+  TransformProp<Input, Output>;
 
-export const ControlledSelect = ({
+export const ControlledSelect = <Output = string, Input = unknown>({
   name,
   defaultValue,
   disabled,
@@ -15,8 +19,9 @@ export const ControlledSelect = ({
   rules = {},
   shouldUnregister,
   value,
+  transform,
   ...rest
-}: ControlledSelectProps) => {
+}: ControlledSelectProps<Output, Input>) => {
   return (
     <Controller
       name={name}
@@ -35,6 +40,8 @@ export const ControlledSelect = ({
           required={typeof rules.required === 'object' ? rules.required.value : !!rules.required}
           {...rest}
           {...field}
+          onChange={(e) => field.onChange(transform?.output?.(e.target.value) ?? e)}
+          value={transform?.input?.(field.value) ?? field.value ?? ''}
           error={!!error}
         />
       )}

package/src/lib/TextField.tsx

@@ -1,12 +1,13 @@
 import { TextField, TextFieldProps } from '@availity/mui-textfield';
 import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
-import { ControllerProps } from './Types';
+import { ControllerProps, TransformProp } from './Types';
 
-export type ControlledTextFieldProps = Omit<TextFieldProps, 'onBlur' | 'onChange' | 'value' | 'name'> &
+export type ControlledTextFieldProps<Output = string> = Omit<TextFieldProps, 'onBlur' | 'onChange' | 'value' | 'name'> &
   Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
-  ControllerProps;
+  ControllerProps &
+  TransformProp<string, Output>;
 
-export const ControlledTextField = ({
+export const ControlledTextField = <Output = string,>({
   name,
   defaultValue,
   disabled,
@@ -16,8 +17,9 @@ export const ControlledTextField = ({
   rules = {},
   shouldUnregister,
   value,
+  transform,
   ...rest
-}: ControlledTextFieldProps) => {
+}: ControlledTextFieldProps<Output>) => {
   return (
     <Controller
       name={name}
@@ -35,6 +37,8 @@ export const ControlledTextField = ({
         <TextField
           required={typeof rules.required === 'object' ? rules.required.value : !!rules.required}
           {...field}
+          onChange={(e) => field.onChange(transform?.output?.(e.target.value) ?? e)}
+          value={transform?.input?.(field.value) ?? field.value ?? ''}
           {...rest}
           slotProps={{
             ...rest.slotProps,