diff --git a/src/components/checkbox/checkbox-base.ts b/src/components/checkbox/checkbox-base.ts
index a7d58c87f..1572b4c41 100644
--- a/src/components/checkbox/checkbox-base.ts
+++ b/src/components/checkbox/checkbox-base.ts
@@ -6,11 +6,8 @@ import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedCheckboxRequiredMixin } from '../common/mixins/forms/associated-required.js';
-import {
-  createFormValueState,
-  defaultBooleanTransformers,
-  type FormValueOf,
-} from '../common/mixins/forms/form-value.js';
+import { FormValueBooleanTransformers } from '../common/mixins/forms/form-transformers.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import type { ToggleLabelPosition } from '../types.js';
 import { checkBoxValidators } from './validators.js';
 
@@ -44,11 +41,10 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
   });
 
   protected readonly _focusRingManager = addKeyboardFocusRing(this);
-  protected override readonly _formValue: FormValueOf<boolean> =
-    createFormValueState(this, {
-      initialValue: false,
-      transformers: defaultBooleanTransformers,
-    });
+  protected override readonly _formValue = createFormValueState(this, {
+    initialValue: false,
+    transformers: FormValueBooleanTransformers,
+  });
   protected _value!: string;
 
   @query('input', true)
@@ -65,7 +61,7 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
   public set value(value: string) {
     this._value = value;
     if (this.checked) {
-      this._setFormValue(this._value || 'on');
+      this._formValue.setValueAndFormState(this.checked);
     }
   }
 
diff --git a/src/components/combo/combo.ts b/src/components/combo/combo.ts
index 849ba227c..87518e363 100644
--- a/src/components/combo/combo.ts
+++ b/src/components/combo/combo.ts
@@ -16,10 +16,7 @@ import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
-import {
-  createFormValueState,
-  type FormValueOf,
-} from '../common/mixins/forms/form-value.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
 import {
   addSafeEventListener,
@@ -147,14 +144,15 @@ export default class IgcComboComponent<
     },
   });
 
-  protected override readonly _formValue: FormValueOf<ComboValue<T>[]> =
-    createFormValueState<ComboValue<T>[]>(this, {
-      initialValue: [],
-      transformers: {
-        setValue: asArray,
-        setDefaultValue: asArray,
-      },
-    });
+  protected override readonly _formValue = createFormValueState<
+    ComboValue<T>[]
+  >(this, {
+    initialValue: [],
+    transformers: {
+      setValue: asArray,
+      setDefaultValue: asArray,
+    },
+  });
   private _data: T[] = [];
 
   private _valueKey?: Keys<T>;
diff --git a/src/components/common/mixins/form-associated.spec.ts b/src/components/common/mixins/form-associated.spec.ts
index 6ce00ea22..55b4ba333 100644
--- a/src/components/common/mixins/form-associated.spec.ts
+++ b/src/components/common/mixins/form-associated.spec.ts
@@ -15,7 +15,7 @@ import {
   type Validator,
 } from '../validators.js';
 import { FormAssociatedRequiredMixin } from './forms/associated-required.js';
-import { createFormValueState, type FormValueOf } from './forms/form-value.js';
+import { createFormValueState } from './forms/form-value.js';
 import type {
   FormAssociatedElementInterface,
   FormRequiredInterface,
@@ -52,8 +52,9 @@ describe('Form associated mixin tests', () => {
           return [requiredValidator, minLengthValidator, maxLengthValidator];
         }
 
-        protected override _formValue: FormValueOf<string> =
-          createFormValueState(this, { initialValue: '' });
+        protected override _formValue = createFormValueState(this, {
+          initialValue: '',
+        });
 
         private _minLength!: number;
         private _maxLength!: number;
diff --git a/src/components/common/mixins/forms/form-transformers.ts b/src/components/common/mixins/forms/form-transformers.ts
new file mode 100644
index 000000000..0ec6d6195
--- /dev/null
+++ b/src/components/common/mixins/forms/form-transformers.ts
@@ -0,0 +1,109 @@
+import {
+  convertToDate,
+  convertToDateRange,
+  getDateFormValue,
+} from '../../../calendar/helpers.js';
+import type { DateRangeValue } from '../../../date-range-picker/date-range-picker.js';
+import { asNumber } from '../../util.js';
+import type { FormValueType, IgcFormControl } from './types.js';
+
+export type FormValueTransformers<T> = {
+  setValue: (value: T) => T;
+  getValue: (value: T) => T;
+  setDefaultValue: (value: T) => T;
+  getDefaultValue: (value: T) => T;
+  setFormValue: (value: T, host: IgcFormControl) => FormValueType;
+};
+
+export type FormValueConfig<T> = {
+  initialValue: T;
+  initialDefaultValue?: T;
+  transformers?: Partial<FormValueTransformers<T>>;
+};
+
+// Transformers
+
+export const FormValueDefaultTransformers: FormValueTransformers<string> = {
+  setValue: (value) => value || '',
+  getValue: (value) => value,
+  setDefaultValue: (value) => value || '',
+  getDefaultValue: (value) => value,
+  setFormValue: (value, _) => value || null,
+};
+
+export const FormValueBooleanTransformers: Partial<
+  FormValueTransformers<boolean>
+> = {
+  setValue: Boolean,
+  setDefaultValue: Boolean,
+  setFormValue: (checked, host) =>
+    checked && 'value' in host ? (host.value as string) || 'on' : null,
+};
+
+export const FormValueNumberTransformers: Partial<
+  FormValueTransformers<number>
+> = {
+  setValue: asNumber,
+  setDefaultValue: asNumber,
+  setFormValue: (value) => value.toString(),
+};
+
+export const FormValueDateTimeTransformers: Partial<
+  FormValueTransformers<Date | null>
+> = {
+  setValue: convertToDate,
+  setDefaultValue: convertToDate,
+  setFormValue: getDateFormValue,
+};
+
+export const FormValueDateRangeTransformers: Partial<
+  FormValueTransformers<DateRangeValue | null>
+> = {
+  setValue: convertToDateRange,
+  setDefaultValue: convertToDateRange,
+  setFormValue: (value, host) => {
+    if (!host.name) {
+      return null;
+    }
+    const start = value?.start?.toISOString();
+    const end = value?.end?.toISOString();
+
+    const formData = new FormData();
+
+    if (start) {
+      formData.append(`${host.name}-start`, start);
+    }
+    if (end) {
+      formData.append(`${host.name}-end`, end);
+    }
+
+    return formData;
+  },
+};
+
+export const FormValueFileListTransformers: FormValueTransformers<FileList | null> =
+  {
+    setValue: (value) => value || null,
+    getValue: (value) => value,
+    setDefaultValue: (value) => value || null,
+    getDefaultValue: (value) => value,
+    setFormValue: (files, host) => {
+      if (!(host.name && files)) {
+        return null;
+      }
+
+      const formData = new FormData();
+      for (const file of files) {
+        formData.append(host.name, file);
+      }
+
+      return formData;
+    },
+  };
+
+export const FormValueSelectTransformers: Partial<
+  FormValueTransformers<string | undefined>
+> = {
+  setValue: (value) => value || undefined,
+  setDefaultValue: (value) => value || undefined,
+};
diff --git a/src/components/common/mixins/forms/form-value.ts b/src/components/common/mixins/forms/form-value.ts
index 3ec98323b..be6aab60e 100644
--- a/src/components/common/mixins/forms/form-value.ts
+++ b/src/components/common/mixins/forms/form-value.ts
@@ -1,132 +1,21 @@
+import type { LitElement } from 'lit';
 import {
-  convertToDate,
-  convertToDateRange,
-  getDateFormValue,
-} from '../../../calendar/helpers.js';
-import type { DateRangeValue } from '../../../date-range-picker/date-range-picker.js';
-import { asNumber } from '../../util.js';
-import type { FormValueType, IgcFormControl } from './types.js';
-
-type FormValueTransformers<T> = {
-  setValue: (value: T) => T;
-  getValue: (value: T) => T;
-  setDefaultValue: (value: T) => T;
-  getDefaultValue: (value: T) => T;
-  setFormValue: (value: T, host: IgcFormControl) => FormValueType;
-};
-
-type FormValueConfig<T> = {
-  initialValue: T;
-  initialDefaultValue?: T;
-  transformers?: Partial<FormValueTransformers<T>>;
-};
-
-const defaultTransformers: FormValueTransformers<string> = {
-  setValue: (value) => value || '',
-  getValue: (value) => value,
-  setDefaultValue: (value) => value || '',
-  getDefaultValue: (value) => value,
-  setFormValue: (value, _: IgcFormControl) => value || null,
-};
-
-export const defaultBooleanTransformers: Partial<
-  FormValueTransformers<boolean>
-> = {
-  setValue: Boolean,
-  setDefaultValue: Boolean,
-  setFormValue: (checked, host) => {
-    return checked && 'value' in host ? (host.value as string) || 'on' : null;
-  },
-};
-
-export const defaultNumberTransformers: Partial<FormValueTransformers<number>> =
-  {
-    setValue: asNumber,
-    setDefaultValue: asNumber,
-    setFormValue: (value) => value.toString(),
-  };
-
-export const defaultDateTimeTransformers: Partial<
-  FormValueTransformers<Date | null>
-> = {
-  setValue: convertToDate,
-  setDefaultValue: convertToDate,
-  setFormValue: getDateFormValue,
-};
-
-export const defaultFileListTransformer: Partial<
-  FormValueTransformers<FileList | null>
-> = {
-  setValue: (value) => value || null,
-  getValue: (value) => value,
-  setDefaultValue: (value) => value || null,
-  getDefaultValue: (value) => value,
-  setFormValue: (files: FileList | null, host: IgcFormControl) => {
-    if (!host.name || !files) {
-      return null;
-    }
-
-    const data = new FormData();
-
-    for (const file of Array.from(files)) {
-      data.append(host.name, file);
-    }
-
-    return data;
-  },
-};
-
-/**
- * Converts a DateDateRangeValue object to FormData with
- * start and end Date values as ISO 8601 strings.
- * The keys are prefixed with the host name
- * and suffixed with 'start' or 'end' accordingly.
- * In case the host does not have a name, it does not participate in form submission.
- *
- * If the date values are null or undefined, the form data values
- * are empty strings ''.
- */
-export function getDateRangeFormValue(
-  value: DateRangeValue | null,
-  host: IgcFormControl
-): FormValueType {
-  if (!host.name) {
-    return null;
-  }
-
-  const start = value?.start?.toISOString();
-  const end = value?.end?.toISOString();
-
-  const fd = new FormData();
-  const prefix = `${host.name}-`;
-
-  if (start) {
-    fd.append(`${prefix}start`, start);
-  }
-  if (end) {
-    fd.append(`${prefix}end`, end);
-  }
-
-  return fd;
-}
-
-export const defaultDateRangeTransformers: Partial<
-  FormValueTransformers<DateRangeValue | null>
-> = {
-  setValue: convertToDateRange,
-  setDefaultValue: convertToDateRange,
-  setFormValue: getDateRangeFormValue,
-};
+  type FormValueConfig,
+  FormValueDefaultTransformers,
+  type FormValueTransformers,
+} from './form-transformers.js';
+import type { IgcFormControl } from './types.js';
 
 /* blazorSuppress */
 export class FormValue<T> {
   private static readonly setFormValueKey = '_setFormValue' as const;
 
-  private _host: IgcFormControl;
+  private readonly _host: IgcFormControl;
+  private readonly _transformers: FormValueTransformers<T>;
+  private readonly _setFormValue: IgcFormControl[typeof FormValue.setFormValueKey];
+
   private _value: T;
   private _defaultValue: T;
-  private _transformers: FormValueTransformers<T>;
-  private _setFormValue: IgcFormControl[typeof FormValue.setFormValueKey];
 
   constructor(host: IgcFormControl, config: FormValueConfig<T>) {
     this._host = host;
@@ -135,7 +24,7 @@ export class FormValue<T> {
     this._setFormValue = host[FormValue.setFormValueKey];
 
     this._transformers = {
-      ...defaultTransformers,
+      ...FormValueDefaultTransformers,
       ...config.transformers,
     } as FormValueTransformers<T>;
   }
@@ -166,10 +55,8 @@ export class FormValue<T> {
 }
 
 export function createFormValueState<T>(
-  host: IgcFormControl,
+  host: LitElement,
   config: FormValueConfig<T>
 ): FormValue<T> {
-  return new FormValue(host, config);
+  return new FormValue(host as IgcFormControl, config);
 }
-
-export type FormValueOf<T> = ReturnType<typeof createFormValueState<T>>;
diff --git a/src/components/date-picker/date-picker.ts b/src/components/date-picker/date-picker.ts
index 883247d6a..ff8443fbf 100644
--- a/src/components/date-picker/date-picker.ts
+++ b/src/components/date-picker/date-picker.ts
@@ -30,11 +30,8 @@ import { IgcBaseComboBoxLikeComponent } from '../common/mixins/combo-box.js';
 import type { AbstractConstructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
-import {
-  createFormValueState,
-  defaultDateTimeTransformers,
-  type FormValueOf,
-} from '../common/mixins/forms/form-value.js';
+import { FormValueDateTimeTransformers } from '../common/mixins/forms/form-transformers.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import {
   addSafeEventListener,
   createCounter,
@@ -192,11 +189,10 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
   private _displayFormat?: string;
   private _inputFormat?: string;
 
-  protected override readonly _formValue: FormValueOf<Date | null> =
-    createFormValueState(this, {
-      initialValue: null,
-      transformers: defaultDateTimeTransformers,
-    });
+  protected override readonly _formValue = createFormValueState(this, {
+    initialValue: null,
+    transformers: FormValueDateTimeTransformers,
+  });
 
   protected override readonly _rootClickController = addRootClickController(
     this,
diff --git a/src/components/date-range-picker/date-range-picker.ts b/src/components/date-range-picker/date-range-picker.ts
index 131e968bc..1ea93ef9a 100644
--- a/src/components/date-range-picker/date-range-picker.ts
+++ b/src/components/date-range-picker/date-range-picker.ts
@@ -35,11 +35,8 @@ import { IgcBaseComboBoxLikeComponent } from '../common/mixins/combo-box.js';
 import type { AbstractConstructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
-import {
-  createFormValueState,
-  defaultDateRangeTransformers,
-  type FormValueOf,
-} from '../common/mixins/forms/form-value.js';
+import { FormValueDateRangeTransformers } from '../common/mixins/forms/form-transformers.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import {
   addSafeEventListener,
   asNumber,
@@ -215,14 +212,10 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 
   private readonly _themes = addThemingController(this, all);
 
-  protected override readonly _formValue: FormValueOf<DateRangeValue | null> =
-    createFormValueState(this, {
-      initialValue: {
-        start: null,
-        end: null,
-      },
-      transformers: defaultDateRangeTransformers,
-    });
+  protected override readonly _formValue = createFormValueState(this, {
+    initialValue: { start: null, end: null },
+    transformers: FormValueDateRangeTransformers,
+  });
 
   protected override readonly _rootClickController = addRootClickController(
     this,
diff --git a/src/components/date-time-input/date-time-input.ts b/src/components/date-time-input/date-time-input.ts
index 87ca8a4b9..459ad986d 100644
--- a/src/components/date-time-input/date-time-input.ts
+++ b/src/components/date-time-input/date-time-input.ts
@@ -16,11 +16,8 @@ import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { AbstractConstructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import {
-  createFormValueState,
-  defaultDateTimeTransformers,
-  type FormValueOf,
-} from '../common/mixins/forms/form-value.js';
+import { FormValueDateTimeTransformers } from '../common/mixins/forms/form-transformers.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
 import type { IgcInputComponentEventMap } from '../input/input-base.js';
 import {
@@ -85,11 +82,10 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
     return dateTimeInputValidators;
   }
 
-  protected override readonly _formValue: FormValueOf<Date | null> =
-    createFormValueState(this, {
-      initialValue: null,
-      transformers: defaultDateTimeTransformers,
-    });
+  protected override readonly _formValue = createFormValueState(this, {
+    initialValue: null,
+    transformers: FormValueDateTimeTransformers,
+  });
 
   protected _defaultMask!: string;
   private _oldValue: Date | null = null;
diff --git a/src/components/file-input/file-input.ts b/src/components/file-input/file-input.ts
index 1c57fb872..c174e1428 100644
--- a/src/components/file-input/file-input.ts
+++ b/src/components/file-input/file-input.ts
@@ -7,11 +7,8 @@ import IgcButtonComponent from '../button/button.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { AbstractConstructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import {
-  createFormValueState,
-  defaultFileListTransformer,
-  type FormValueOf,
-} from '../common/mixins/forms/form-value.js';
+import { FormValueFileListTransformers } from '../common/mixins/forms/form-transformers.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
 import { isEmpty } from '../common/util.js';
 import {
@@ -74,11 +71,10 @@ export default class IgcFileInputComponent extends EventEmitterMixin<
     return fileValidators;
   }
 
-  protected override readonly _formValue: FormValueOf<FileList | null> =
-    createFormValueState(this, {
-      initialValue: null,
-      transformers: defaultFileListTransformer,
-    });
+  protected override readonly _formValue = createFormValueState(this, {
+    initialValue: null,
+    transformers: FormValueFileListTransformers,
+  });
 
   @state()
   private _hasActivation = false;
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 6a2918e53..f4bfeb9f3 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -4,10 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 
 import { registerComponent } from '../common/definitions/register.js';
-import {
-  createFormValueState,
-  type FormValueOf,
-} from '../common/mixins/forms/form-value.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
 import { isEmpty } from '../common/util.js';
 import type { InputType, RangeTextSelectMode } from '../types.js';
@@ -50,8 +47,9 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
     registerComponent(IgcInputComponent, IgcValidationContainerComponent);
   }
 
-  protected override readonly _formValue: FormValueOf<string> =
-    createFormValueState(this, { initialValue: '' });
+  protected override readonly _formValue = createFormValueState(this, {
+    initialValue: '',
+  });
 
   protected override get __validators() {
     return this.type !== 'number' ? stringValidators : numberValidators;
diff --git a/src/components/mask-input/mask-input.ts b/src/components/mask-input/mask-input.ts
index 8e388cf18..519473ea0 100644
--- a/src/components/mask-input/mask-input.ts
+++ b/src/components/mask-input/mask-input.ts
@@ -5,10 +5,7 @@ import { live } from 'lit/directives/live.js';
 
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import {
-  createFormValueState,
-  type FormValueOf,
-} from '../common/mixins/forms/form-value.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
 import { isEmpty } from '../common/util.js';
 import type { MaskInputValueMode } from '../types.js';
@@ -55,14 +52,13 @@ export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
     return maskValidators;
   }
 
-  protected override readonly _formValue: FormValueOf<string> =
-    createFormValueState(this, {
-      initialValue: '',
-      transformers: {
-        setFormValue: (value) =>
-          this._isRawMode ? value || null : this.maskedValue || null,
-      },
-    });
+  protected override readonly _formValue = createFormValueState(this, {
+    initialValue: '',
+    transformers: {
+      setFormValue: (value) =>
+        this._isRawMode ? value || null : this.maskedValue || null,
+    },
+  });
 
   protected get _isRawMode() {
     return this.valueMode === 'raw';
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index b048b5921..6633ff70d 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -16,11 +16,8 @@ import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedCheckboxRequiredMixin } from '../common/mixins/forms/associated-required.js';
-import {
-  createFormValueState,
-  defaultBooleanTransformers,
-  type FormValueOf,
-} from '../common/mixins/forms/form-value.js';
+import { FormValueBooleanTransformers } from '../common/mixins/forms/form-transformers.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
 import { isDefined, isEmpty, isLTR, last, wrap } from '../common/util.js';
 import type { ToggleLabelPosition } from '../types.js';
@@ -87,11 +84,10 @@ export default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMix
     onChange: this._handleSlotChange,
   });
 
-  protected override readonly _formValue: FormValueOf<boolean> =
-    createFormValueState(this, {
-      initialValue: false,
-      transformers: defaultBooleanTransformers,
-    });
+  protected override readonly _formValue = createFormValueState(this, {
+    initialValue: false,
+    transformers: FormValueBooleanTransformers,
+  });
 
   protected _value!: string;
 
@@ -147,7 +143,7 @@ export default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMix
   public set value(value: string) {
     this._value = value;
     if (this.checked) {
-      this._setFormValue(this._value || 'on');
+      this._formValue.setValueAndFormState(this.checked);
     }
   }
 
diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts
index 4177afb1b..6eec0a20a 100644
--- a/src/components/rating/rating.ts
+++ b/src/components/rating/rating.ts
@@ -24,11 +24,8 @@ import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedMixin } from '../common/mixins/forms/associated.js';
-import {
-  createFormValueState,
-  defaultNumberTransformers,
-  type FormValueOf,
-} from '../common/mixins/forms/form-value.js';
+import { FormValueNumberTransformers } from '../common/mixins/forms/form-transformers.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import {
   asNumber,
   clamp,
@@ -89,11 +86,10 @@ export default class IgcRatingComponent extends FormAssociatedMixin(
     );
   }
 
-  protected override readonly _formValue: FormValueOf<number> =
-    createFormValueState(this, {
-      initialValue: 0,
-      transformers: defaultNumberTransformers,
-    });
+  protected override readonly _formValue = createFormValueState(this, {
+    initialValue: 0,
+    transformers: FormValueNumberTransformers,
+  });
 
   private _max = 5;
   private _step = 1;
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 8bf7386ba..e0fbec430 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -33,10 +33,8 @@ import {
 import type { AbstractConstructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
-import {
-  createFormValueState,
-  type FormValueOf,
-} from '../common/mixins/forms/form-value.js';
+import { FormValueSelectTransformers } from '../common/mixins/forms/form-transformers.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
 import {
   addSafeEventListener,
@@ -162,14 +160,10 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
     }
   );
 
-  protected override readonly _formValue: FormValueOf<string | undefined> =
-    createFormValueState<string | undefined>(this, {
-      initialValue: undefined,
-      transformers: {
-        setValue: (value) => value || undefined,
-        setDefaultValue: (value) => value || undefined,
-      },
-    });
+  protected override readonly _formValue = createFormValueState(this, {
+    initialValue: undefined,
+    transformers: FormValueSelectTransformers,
+  });
 
   @state()
   protected _selectedItem: IgcSelectItemComponent | null = null;
diff --git a/src/components/slider/slider.ts b/src/components/slider/slider.ts
index 581d0ea51..55d9b96d7 100644
--- a/src/components/slider/slider.ts
+++ b/src/components/slider/slider.ts
@@ -1,14 +1,10 @@
 import { property } from 'lit/decorators.js';
-
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedMixin } from '../common/mixins/forms/associated.js';
-import {
-  createFormValueState,
-  defaultNumberTransformers,
-  type FormValueOf,
-} from '../common/mixins/forms/form-value.js';
+import { FormValueNumberTransformers } from '../common/mixins/forms/form-transformers.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { asNumber, asPercent, clamp } from '../common/util.js';
 import { IgcSliderBaseComponent } from './slider-base.js';
 import IgcSliderLabelComponent from './slider-label.js';
@@ -60,11 +56,10 @@ export default class IgcSliderComponent extends FormAssociatedMixin(
     registerComponent(IgcSliderComponent, IgcSliderLabelComponent);
   }
 
-  protected override readonly _formValue: FormValueOf<number> =
-    createFormValueState(this, {
-      initialValue: 0,
-      transformers: defaultNumberTransformers,
-    });
+  protected override readonly _formValue = createFormValueState(this, {
+    initialValue: 0,
+    transformers: FormValueNumberTransformers,
+  });
 
   /* @tsTwoWayProperty(true, "igcChange", "detail", false) */
   /**
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index d9d801a0b..96f66ad64 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -23,10 +23,7 @@ import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
-import {
-  createFormValueState,
-  type FormValueOf,
-} from '../common/mixins/forms/form-value.js';
+import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
 import { addSafeEventListener, asNumber } from '../common/util.js';
 import type {
@@ -121,8 +118,9 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
     return textAreaValidators;
   }
 
-  protected override readonly _formValue: FormValueOf<string> =
-    createFormValueState(this, { initialValue: '' });
+  protected override readonly _formValue = createFormValueState(this, {
+    initialValue: '',
+  });
 
   //#endregion