form-input-fields 1.0.15 → 1.0.17

package/README.md

@@ -2,13 +2,15 @@
 
 A collection of Material-UI form field components with Formik integration.
 
+**Version 1.0.16**
+
 More control in the progress of development.
 
 ## Installation
 
 ### Prerequisites
 
-Before installing the form-fields package, make sure you have the following peer dependencies installed in your project:
+Before installing the form-input-fields package, make sure you have the following peer dependencies installed in your project:
 
 - React 16.8.0 or later
 - React DOM 16.8.0 or later
@@ -20,13 +22,13 @@ Before installing the form-fields package, make sure you have the following peer
 ### Using npm
 
 ```bash
-npm install form-fields @mui/material @emotion/react @emotion/styled formik @mui/x-date-pickers dayjs
+npm install form-input-fields @mui/material @emotion/react @emotion/styled formik @mui/x-date-pickers dayjs
 ```
 
 ### Using yarn
 
 ```bash
-yarn add @your-org/form-fields @mui/material @emotion/react @emotion/styled formik @mui/x-date-pickers dayjs
+yarn add form-input-fields @mui/material @emotion/react @emotion/styled formik @mui/x-date-pickers dayjs
 ```
 
 ### Using pnpm
@@ -61,6 +63,7 @@ This package includes TypeScript type definitions. No additional type packages a
 ### Browser Support
 
 The form fields support all modern browsers including:
+
 - Chrome (latest 2 versions)
 - Firefox (latest 2 versions)
 - Safari (latest 2 versions)
@@ -81,6 +84,7 @@ import { FormTextField, FormDateField, FormMaskField, FormSwitch } from 'form-in
 If you encounter any issues during installation, try the following:
 
 1. Clear your package manager's cache:
+
    ```bash
    npm cache clean --force
    # or
@@ -102,7 +106,6 @@ If you encounter any issues during installation, try the following:
 
 If you're still experiencing issues, please reach me at vladimir.vorobiev@gmail.com with details about your environment and the error message you're seeing.
 
-
 ## Table of Contents
 
 - [FormTextField](#formtextfield)
@@ -173,6 +176,19 @@ If you're still experiencing issues, please reach me at vladimir.vorobiev@gmail.
     - [Basic Date Text Input](#basic-date-text-input)
     - [Date Text Field with Formik](#date-text-field-with-formik)
     - [Custom Date Format](#custom-date-format)
+- [Styling Form Controls](#styling-form-controls)
+  - [sx Prop Support](#sx-prop-support)
+    - [Benefits of the sx Prop](#benefits-of-the-sx-prop)
+    - [Using the sx Prop with Form Controls](#using-the-sx-prop-with-form-controls)
+  - [FormControl Wrapper Pattern](#formcontrol-wrapper-pattern)
+    - [FormControl Wrapper Benefits](#formcontrol-wrapper-benefits)
+    - [Example: FormControl Wrapper in Action](#example-formcontrol-wrapper-in-action)
+  - [Advanced Styling Examples](#advanced-styling-examples)
+    - [Custom Theme Integration](#custom-theme-integration)
+    - [Responsive Form Layout](#responsive-form-layout)
+    - [Conditional Styling Based on State](#conditional-styling-based-on-state)
+  - [Best Practices for Styling Form Controls](#best-practices-for-styling-form-controls)
+  - [Migration Guide](#migration-guide)
 - [History](#history)
 
 ---
@@ -194,19 +210,16 @@ A versatile text input field component that integrates Material-UI's TextField w
 
 ```tsx
 import { Formik, Field } from 'formik';
-import { FormTextField } from 'form-fields';
+import { FormTextField } from 'form-input-fields';
 
-<Formik
-  initialValues={{ username: '' }}
-  onSubmit={(values) => console.log(values)}
->
+<Formik initialValues={{ username: '' }} onSubmit={values => console.log(values)}>
   <Field
     component={FormTextField}
     name="username"
     label="Username"
     placeholder="Enter your username"
   />
-</Formik>
+</Formik>;
 ```
 
 ### Props
@@ -215,16 +228,17 @@ The FormTextField component accepts all props from `FormTextFieldProps`, `FieldP
 
 #### FormTextFieldProps Interface
 
-| Prop       | Type       | Default | Description                                   |
-|------------|------------|---------|-----------------------------------------------|
-| `onChange` | `function` | -       | Custom change handler that overrides Formik's |
-| `onBlur`   | `function` | -       | Custom blur handler that overrides Formik's   |
-| `variant`  | `'standard' | 'outlined' | 'filled'` | 'standard' | The variant of the MUI TextField. |
+| Prop       | Type             | Default    | Description                                                                            |
+| ---------- | ---------------- | ---------- | -------------------------------------------------------------------------------------- | ---------- | --------------------------------- |
+| `onChange` | `function`       | -          | Custom change handler that overrides Formik's                                          |
+| `onBlur`   | `function`       | -          | Custom blur handler that overrides Formik's                                            |
+| `variant`  | `'standard'      | 'outlined' | 'filled'`                                                                              | 'standard' | The variant of the MUI TextField. |
+| `sx`       | `SxProps<Theme>` | -          | The system prop that allows defining system overrides as well as additional CSS styles |
 
 #### Common Props (from FieldProps & TextFieldProps)
 
 | Prop         | Type             | Required | Description                                   |
-|--------------|------------------|----------|-----------------------------------------------|
+| ------------ | ---------------- | -------- | --------------------------------------------- |
 | `name`       | `string`         | Yes      | Field name in Formik values                   |
 | `label`      | `string`         | No       | Field label                                   |
 | `helperText` | `string`         | No       | Custom helper text                            |
@@ -264,7 +278,7 @@ The FormTextField component accepts all props from `FormTextFieldProps`, `FieldP
     }
     return errors;
   }}
-  onSubmit={(values) => console.log(values)}
+  onSubmit={values => console.log(values)}
 >
   {({ errors, touched }) => (
     <Field
@@ -290,7 +304,7 @@ The FormTextField component accepts all props from `FormTextFieldProps`, `FieldP
   type="password"
   inputProps={{
     minLength: 8,
-    pattern: "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
+    pattern: '(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}',
   }}
   helperText="Must contain at least 8 characters, including uppercase, lowercase, and numbers"
   required
@@ -325,10 +339,7 @@ const items = [
   { id: '3', description: 'Option 3' },
 ];
 
-<Formik
-  initialValues={{ category: '' }}
-  onSubmit={(values) => console.log(values)}
->
+<Formik initialValues={{ category: '' }} onSubmit={values => console.log(values)}>
   <Field
     component={FormDropDownField}
     name="category"
@@ -336,7 +347,7 @@ const items = [
     items={items}
     addInputSelect={true}
   />
-</Formik>
+</Formik>;
 ```
 
 ### Props
@@ -345,19 +356,20 @@ The FormDropDownField component accepts all props from `FormDropDownFieldProps`,
 
 #### FormDropDownFieldProps Interface
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `Array<{ id: string | number; description: string }>` | `[]` | Array of items to display in the dropdown |
-| `addInputSelect` | `boolean` | `false` | Whether to show a default "Select" option as the first item |
-| `selectText` | `string` | `'Select'` | Text to display for the default "Select" option |
-| `required` | `boolean` | `false` | Whether the field is required |
-| `disabled` | `boolean` | `false` | Whether the field is disabled |
-| `className` | `string` | - | Custom class name for the root element |
-| `helperText` | `string` | - | Helper text to display below the field |
-| `error` | `boolean` | - | Error state of the field (overrides Formik error state) |
-| `onChange` | `(value: any) => void` | - | Custom change handler |
-| `onBlur` | `(event: React.FocusEvent<HTMLInputElement>) => void` | - | Custom blur handler |
-| `variant` | `'standard' | 'outlined' | 'filled'` | 'standard' | The variant of the MUI TextField. |
+| Prop             | Type                                                  | Default                         | Description                                                                            |
+| ---------------- | ----------------------------------------------------- | ------------------------------- | -------------------------------------------------------------------------------------- | ----------------------------------------- | --------------------------------- |
+| `items`          | `Array<{ id: string                                   | number; description: string }>` | `[]`                                                                                   | Array of items to display in the dropdown |
+| `addInputSelect` | `boolean`                                             | `false`                         | Whether to show a default "Select" option as the first item                            |
+| `selectText`     | `string`                                              | `'Select'`                      | Text to display for the default "Select" option                                        |
+| `required`       | `boolean`                                             | `false`                         | Whether the field is required                                                          |
+| `disabled`       | `boolean`                                             | `false`                         | Whether the field is disabled                                                          |
+| `className`      | `string`                                              | -                               | Custom class name for the root element                                                 |
+| `helperText`     | `string`                                              | -                               | Helper text to display below the field                                                 |
+| `error`          | `boolean`                                             | -                               | Error state of the field (overrides Formik error state)                                |
+| `onChange`       | `(value: any) => void`                                | -                               | Custom change handler                                                                  |
+| `onBlur`         | `(event: React.FocusEvent<HTMLInputElement>) => void` | -                               | Custom blur handler                                                                    |
+| `variant`        | `'standard'                                           | 'outlined'                      | 'filled'`                                                                              | 'standard'                                | The variant of the MUI TextField. |
+| `sx`             | `SxProps<Theme>`                                      | -                               | The system prop that allows defining system overrides as well as additional CSS styles |
 
 ### Examples
 
@@ -377,7 +389,7 @@ const items = [
   items={items}
   fullWidth
   variant="outlined" // <-- Example with outlined variant
-/>
+/>;
 ```
 
 #### Dropdown with Default Selection
@@ -402,7 +414,7 @@ const items = [
   validationSchema={Yup.object({
     department: Yup.string().required('Department is required'),
   })}
-  onSubmit={(values) => console.log(values)}
+  onSubmit={values => console.log(values)}
 >
   {({ errors, touched }) => (
     <Form>
@@ -450,9 +462,9 @@ The component uses predefined date format constants from `date.ts`:
 
 ```typescript
 export const FORM_DATE_FORMAT = {
-  short: "YYYY-MM-DD",
-  long: "MM/DD/YYYY hh:mm A",
-  custom: "DD MMMM YYYY hh:mm A",
+  short: 'YYYY-MM-DD',
+  long: 'MM/DD/YYYY hh:mm A',
+  custom: 'DD MMMM YYYY hh:mm A',
 };
 ```
 
@@ -460,7 +472,7 @@ export const FORM_DATE_FORMAT = {
 
 ```typescript
 export const DATE_PICKER_DATE_FORMAT = {
-  short: "DD/MM/YYYY",
+  short: 'DD/MM/YYYY',
 };
 ```
 
@@ -468,8 +480,8 @@ export const DATE_PICKER_DATE_FORMAT = {
 
 ```typescript
 export const DATE_PICKER_MONTH_YEAR_FORMAT = {
-  short: "MM/YYYY",
-  long: "MMMM YYYY",
+  short: 'MM/YYYY',
+  long: 'MMMM YYYY',
 };
 ```
 
@@ -480,7 +492,7 @@ import {
   FORM_DATE_FORMAT,
   DATE_PICKER_DATE_FORMAT,
   DATE_PICKER_MONTH_YEAR_FORMAT
-} from "form-input-mask-field/date";
+} from "form-input-fields/date";
 
 // Use predefined formats
 <Field
@@ -500,14 +512,14 @@ import {
 ### Usage with Formik
 
 ```tsx
-import { Formik, Field } from "formik";
-import { FormDateField, FormDateFieldProps } from "form-input-mask-field";
-import { FORM_DATE_FORMAT } from "form-input-mask-field/date";
-import dayjs from "dayjs";
+import { Formik, Field } from 'formik';
+import { FormDateField, FormDateFieldProps } from 'form-input-fields';
+import { FORM_DATE_FORMAT } from 'form-input-fields/date';
+import dayjs from 'dayjs';
 
 <Formik
   initialValues={{ birthDate: null, appointmentDate: null }}
-  onSubmit={(values) => console.log(values)}
+  onSubmit={values => console.log(values)}
 >
   {/* Basic usage */}
   <Field
@@ -528,8 +540,8 @@ import dayjs from "dayjs";
     showTodayButton={true}
     showDateFormat={true}
     onChange={(value, context) => {
-      console.log("Selected date:", value);
-      console.log("Formatted value:", context.formattedValue);
+      console.log('Selected date:', value);
+      console.log('Formatted value:', context.formattedValue);
     }}
   />
 </Formik>;
@@ -552,6 +564,7 @@ The FormDateField component accepts all props from `FormDateFieldProps`, `FieldP
 | `readOnly`        | `boolean`  | `false`                  | Make the field read-only                      |
 | `showDateFormat`  | `boolean`  | `false`                  | Show the date format as helper text           |
 | `onChange`        | `function` | -                        | Custom change handler with additional context |
+| `sx`              | `SxProps<Theme>` | - | The system prop that allows defining system overrides as well as additional CSS styles |
 
 #### Common Props (from FieldProps & TextFieldProps)
 
@@ -569,12 +582,7 @@ The FormDateField component accepts all props from `FormDateFieldProps`, `FieldP
 #### Basic Date Input
 
 ```tsx
-<Field
-  component={FormDateField}
-  name="birthDate"
-  label="Birth Date"
-  format="DD/MM/YYYY"
-/>
+<Field component={FormDateField} name="birthDate" label="Birth Date" format="DD/MM/YYYY" />
 ```
 
 #### Date with Validation
@@ -599,8 +607,8 @@ The FormDateField component accepts all props from `FormDateFieldProps`, `FieldP
   name="appointmentDate"
   label="Appointment Date"
   format="DD MMMM YYYY"
-  minDate={dayjs().add(1, "day")}
-  maxDate={dayjs().add(3, "month")}
+  minDate={dayjs().add(1, 'day')}
+  maxDate={dayjs().add(3, 'month')}
   showTodayButton={true}
   showDateFormat={true}
 />
@@ -627,13 +635,13 @@ The FormDateField component accepts all props from `FormDateFieldProps`, `FieldP
   label="Event Date"
   format="YYYY-MM-DD"
   onChange={(value, context) => {
-    console.log("Selected date:", value);
-    console.log("Formatted value:", context.formattedValue);
-    console.log("Validation error:", context.validationError);
+    console.log('Selected date:', value);
+    console.log('Formatted value:', context.formattedValue);
+    console.log('Validation error:', context.validationError);
 
     // Custom logic here
     if (value && value.day() === 0) {
-      alert("Events cannot be scheduled on Sundays");
+      alert('Events cannot be scheduled on Sundays');
     }
   }}
 />
@@ -676,7 +684,7 @@ A customizable checkbox component with Material-UI and Formik integration, provi
 
 ```tsx
 import { Formik, Field } from 'formik';
-import { FormCheckboxField } from 'form-input-mask-field';
+import { FormCheckboxField } from 'form-input-fields';
 
 // Basic usage
 <FormCheckboxField
@@ -715,17 +723,17 @@ The FormCheckboxField component accepts all props from `FormCheckboxFieldProps`
 
 #### FormCheckboxFieldProps Interface
 
-| Prop           | Type      | Default | Description                                      |
-| -------------- | --------- | ------- | ------------------------------------------------ |
-| `id`           | `string`  | -       | Unique identifier for the checkbox               |
-| `label`        | `string`  | -       | Label text displayed next to the checkbox        |
-| `checked`      | `boolean` | `false` | Whether the checkbox is checked                  |
-| `onChange`     | `function`| -       | Callback when checkbox state changes             |
-| `disabled`     | `boolean` | `false` | Disable the checkbox                             |
-| `required`     | `boolean` | `false` | Mark the field as required                       |
-| `color`        | `string`  | 'primary'| Color of the checkbox when checked               |
-| `size`         | `string`  | 'medium'| Size of the checkbox ('small' or 'medium')       |
-| `labelPlacement`| `string` | 'end'   | Position of the label ('end', 'start', 'top', 'bottom') |
+| Prop             | Type       | Default   | Description                                             |
+| ---------------- | ---------- | --------- | ------------------------------------------------------- |
+| `id`             | `string`   | -         | Unique identifier for the checkbox                      |
+| `label`          | `string`   | -         | Label text displayed next to the checkbox               |
+| `checked`        | `boolean`  | `false`   | Whether the checkbox is checked                         |
+| `onChange`       | `function` | -         | Callback when checkbox state changes                    |
+| `disabled`       | `boolean`  | `false`   | Disable the checkbox                                    |
+| `required`       | `boolean`  | `false`   | Mark the field as required                              |
+| `color`          | `string`   | 'primary' | Color of the checkbox when checked                      |
+| `size`           | `string`   | 'medium'  | Size of the checkbox ('small' or 'medium')              |
+| `labelPlacement` | `string`   | 'end'     | Position of the label ('end', 'start', 'top', 'bottom') |
 
 ### Examples
 
@@ -736,7 +744,7 @@ The FormCheckboxField component accepts all props from `FormCheckboxFieldProps`
   id="notifications"
   label="Enable email notifications"
   checked={notificationsEnabled}
-  onChange={(e) => setNotificationsEnabled(e.target.checked)}
+  onChange={e => setNotificationsEnabled(e.target.checked)}
   color="secondary"
 />
 ```
@@ -748,9 +756,9 @@ The FormCheckboxField component accepts all props from `FormCheckboxFieldProps`
   initialValues={{
     termsAccepted: false,
     newsletter: true,
-    notifications: false
+    notifications: false,
   }}
-  onSubmit={(values) => console.log('Form values:', values)}
+  onSubmit={values => console.log('Form values:', values)}
 >
   {({ values }) => (
     <Form>
@@ -761,12 +769,12 @@ The FormCheckboxField component accepts all props from `FormCheckboxFieldProps`
             {...field}
             label="I agree to the terms and conditions"
             checked={field.value}
-            onChange={(e) => form.setFieldValue(field.name, e.target.checked)}
+            onChange={e => form.setFieldValue(field.name, e.target.checked)}
             required
           />
         )}
       />
-      
+
       <Field
         name="newsletter"
         component={({ field, form }) => (
@@ -774,12 +782,12 @@ The FormCheckboxField component accepts all props from `FormCheckboxFieldProps`
             {...field}
             label="Subscribe to newsletter"
             checked={field.value}
-            onChange={(e) => form.setFieldValue(field.name, e.target.checked)}
+            onChange={e => form.setFieldValue(field.name, e.target.checked)}
             color="secondary"
           />
         )}
       />
-      
+
       <Button type="submit" variant="contained" color="primary">
         Submit
       </Button>
@@ -793,7 +801,7 @@ The FormCheckboxField component accepts all props from `FormCheckboxFieldProps`
 ```tsx
 import { makeStyles } from '@mui/styles';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     margin: theme.spacing(1),
   },
@@ -805,7 +813,7 @@ const useStyles = makeStyles((theme) => ({
 
 function CustomCheckbox() {
   const classes = useStyles();
-  
+
   return (
     <FormCheckboxField
       id="custom-checkbox"
@@ -869,31 +877,32 @@ The FormSwitch component accepts all props from `FormSwitchProps`, `FieldProps`
 
 #### FormSwitchProps Interface
 
-| Prop             | Type       | Default | Description                                      |
-| ---------------- | ---------- | ------- | ------------------------------------------------ |
-| `label`          | `string`   | -       | Label text displayed next to the switch          |
-| `labelPlacement` | `string`   | 'end'   | Position of label ('top', 'start', 'bottom', 'end') |
-| `color`          | `string`   | 'primary'| Switch color ('primary', 'secondary', 'error', 'info', 'success', 'warning', 'default') |
-| `size`           | `string`   | 'medium'| Switch size ('small' or 'medium')               |
-| `disabled`       | `boolean`  | `false` | Disable the switch                               |
-| `required`       | `boolean`  | `false` | Mark the field as required                       |
-| `onChange`       | `function` | -       | Custom change handler with context data          |
-| `onBlur`         | `function` | -       | Custom blur handler                               |
-| `helperText`     | `string`   | -       | Helper text to display below the switch          |
-| `error`          | `boolean`  | `false` | Error state of the switch                        |
-| `className`      | `string`   | -       | Custom class name for the root element           |
+| Prop             | Type             | Default   | Description                                                                             |
+| ---------------- | ---------------- | --------- | --------------------------------------------------------------------------------------- |
+| `label`          | `string`         | -         | Label text displayed next to the switch                                                 |
+| `labelPlacement` | `string`         | 'end'     | Position of label ('top', 'start', 'bottom', 'end')                                     |
+| `color`          | `string`         | 'primary' | Switch color ('primary', 'secondary', 'error', 'info', 'success', 'warning', 'default') |
+| `size`           | `string`         | 'medium'  | Switch size ('small' or 'medium')                                                       |
+| `disabled`       | `boolean`        | `false`   | Disable the switch                                                                      |
+| `required`       | `boolean`        | `false`   | Mark the field as required                                                              |
+| `onChange`       | `function`       | -         | Custom change handler with context data                                                 |
+| `onBlur`         | `function`       | -         | Custom blur handler                                                                     |
+| `helperText`     | `string`         | -         | Helper text to display below the switch                                                 |
+| `error`          | `boolean`        | `false`   | Error state of the switch                                                               |
+| `className`      | `string`         | -         | Custom class name for the root element                                                  |
+| `sx`             | `SxProps<Theme>` | -         | The system prop that allows defining system overrides as well as additional CSS styles |
 
 #### Common Props (from FieldProps & SwitchProps)
 
-| Prop         | Type             | Required | Description                                   |
-|--------------|------------------|----------|-----------------------------------------------|
-| `name`       | `string`         | Yes      | Field name in Formik values                   |
-| `label`      | `string`         | No       | Field label                                   |
-| `helperText` | `string`         | No       | Custom helper text                            |
-| `error`      | `boolean`        | No       | Error state (auto-managed by Formik)          |
-| `disabled`   | `boolean`        | No       | Disabled state                                |
-| `required`   | `boolean`        | No       | Required field indicator                      |
-| Other        | `SwitchProps`    | No       | All Material-UI Switch props are supported    |
+| Prop         | Type          | Required | Description                                |
+| ------------ | ------------- | -------- | ------------------------------------------ |
+| `name`       | `string`      | Yes      | Field name in Formik values                |
+| `label`      | `string`      | No       | Field label                                |
+| `helperText` | `string`      | No       | Custom helper text                         |
+| `error`      | `boolean`     | No       | Error state (auto-managed by Formik)       |
+| `disabled`   | `boolean`     | No       | Disabled state                             |
+| `required`   | `boolean`     | No       | Required field indicator                   |
+| Other        | `SwitchProps` | No       | All Material-UI Switch props are supported |
 
 ### Examples
 
@@ -916,9 +925,9 @@ The FormSwitch component accepts all props from `FormSwitchProps`, `FieldProps`
   initialValues={{
     notifications: false,
     darkMode: true,
-    autoSave: false
+    autoSave: false,
   }}
-  onSubmit={(values) => console.log('Form values:', values)}
+  onSubmit={values => console.log('Form values:', values)}
 >
   <Form>
     <Field
@@ -928,7 +937,7 @@ The FormSwitch component accepts all props from `FormSwitchProps`, `FieldProps`
       helperText="Receive email notifications"
       color="primary"
     />
-    
+
     <Field
       component={FormSwitch}
       name="darkMode"
@@ -937,7 +946,7 @@ The FormSwitch component accepts all props from `FormSwitchProps`, `FieldProps`
       color="secondary"
       labelPlacement="start"
     />
-    
+
     <Field
       component={FormSwitch}
       name="autoSave"
@@ -946,7 +955,7 @@ The FormSwitch component accepts all props from `FormSwitchProps`, `FieldProps`
       color="success"
       size="small"
     />
-    
+
     <Button type="submit" variant="contained" color="primary">
       Save Settings
     </Button>
@@ -989,14 +998,14 @@ The FormSwitch component accepts all props from `FormSwitchProps`, `FieldProps`
 ```tsx
 <Formik
   initialValues={{ termsAccepted: false }}
-  validate={(values) => {
+  validate={values => {
     const errors = {};
     if (!values.termsAccepted) {
       errors.termsAccepted = 'You must accept the terms to continue';
     }
     return errors;
   }}
-  onSubmit={(values) => console.log(values)}
+  onSubmit={values => console.log(values)}
 >
   <Form>
     <Field
@@ -1006,7 +1015,7 @@ The FormSwitch component accepts all props from `FormSwitchProps`, `FieldProps`
       helperText="Please read and accept the terms"
       required
     />
-    
+
     <Button type="submit" variant="contained" color="primary">
       Continue
     </Button>
@@ -1035,9 +1044,9 @@ The component uses predefined date format constants from `date.ts`:
 
 ```typescript
 export const FORM_DATE_FORMAT = {
-  short: "YYYY-MM-DD",
-  long: "MM/DD/YYYY hh:mm A",
-  custom: "DD MMMM YYYY hh:mm A"
+  short: 'YYYY-MM-DD',
+  long: 'MM/DD/YYYY hh:mm A',
+  custom: 'DD MMMM YYYY hh:mm A',
 };
 ```
 
@@ -1045,7 +1054,7 @@ export const FORM_DATE_FORMAT = {
 
 ```typescript
 export const DATE_PICKER_DATE_FORMAT = {
-  short: "DD/MM/YYYY"
+  short: 'DD/MM/YYYY',
 };
 ```
 
@@ -1053,8 +1062,8 @@ export const DATE_PICKER_DATE_FORMAT = {
 
 ```typescript
 export const DATE_PICKER_MONTH_YEAR_FORMAT = {
-  short: "MM/YYYY",
-  long: "MMMM YYYY"
+  short: 'MM/YYYY',
+  long: 'MMMM YYYY',
 };
 ```
 
@@ -1062,19 +1071,11 @@ export const DATE_PICKER_MONTH_YEAR_FORMAT = {
 
 ```tsx
 import { Formik, Field } from 'formik';
-import { FormDateTextField } from 'form-fields';
+import { FormDateTextField } from 'form-input-fields';
 
-<Formik
-  initialValues={{ eventDate: '' }}
-  onSubmit={(values) => console.log(values)}
->
-  <Field
-    component={FormDateTextField}
-    name="eventDate"
-    label="Event Date"
-    format="MM/DD/YYYY"
-  />
-</Formik>
+<Formik initialValues={{ eventDate: '' }} onSubmit={values => console.log(values)}>
+  <Field component={FormDateTextField} name="eventDate" label="Event Date" format="MM/DD/YYYY" />
+</Formik>;
 ```
 
 ### Props
@@ -1083,27 +1084,28 @@ The FormDateTextField component accepts all props from `FormDateTextFieldProps`,
 
 #### FormDateTextFieldProps Interface
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `format` | `string` | `FORM_DATE_FORMAT.long` | Date format string using day.js tokens |
-| `required` | `boolean` | `false` | Whether the field is required |
-| `disabled` | `boolean` | `false` | Whether the field is disabled |
-| `className` | `string` | - | Custom class name for the root element |
-| `helperText` | `string` | - | Helper text to display below the field |
-| `error` | `boolean` | - | Error state of the field |
-| `onChange` | `(value: Dayjs \| null) => void` | - | Custom change handler |
-| `onBlur` | `(event: React.FocusEvent<HTMLInputElement>) => void` | - | Custom blur handler |
+| Prop         | Type                                                  | Default                 | Description                            |
+| ------------ | ----------------------------------------------------- | ----------------------- | -------------------------------------- |
+| `format`     | `string`                                              | `FORM_DATE_FORMAT.long` | Date format string using day.js tokens |
+| `required`   | `boolean`                                             | `false`                 | Whether the field is required          |
+| `disabled`   | `boolean`                                             | `false`                 | Whether the field is disabled          |
+| `className`  | `string`                                              | -                       | Custom class name for the root element |
+| `helperText` | `string`                                              | -                       | Helper text to display below the field |
+| `error`      | `boolean`                                             | -                       | Error state of the field               |
+| `onChange`   | `(value: Dayjs \| null) => void`                      | -                       | Custom change handler                  |
+| `onBlur`     | `(event: React.FocusEvent<HTMLInputElement>) => void` | -                       | Custom blur handler                    |
+| `sx`         | `SxProps<Theme>`                                      | -                       | The system prop that allows defining system overrides as well as additional CSS styles |
 
 #### Common Props (from FieldProps & TextFieldProps)
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `name` | `string` | Yes | Field name in Formik values |
-| `label` | `string` | No | Label for the input field |
-| `placeholder` | `string` | No | Placeholder text |
-| `fullWidth` | `boolean` | No | If true, the input will take up the full width of its container |
-| `margin` | `'none' \| 'dense' \| 'normal'` | No | If 'dense' or 'normal', will adjust vertical spacing |
-| `size` | `'small' \| 'medium'` | No | The size of the text field |
+| Prop          | Type                            | Required | Description                                                     |
+| ------------- | ------------------------------- | -------- | --------------------------------------------------------------- |
+| `name`        | `string`                        | Yes      | Field name in Formik values                                     |
+| `label`       | `string`                        | No       | Label for the input field                                       |
+| `placeholder` | `string`                        | No       | Placeholder text                                                |
+| `fullWidth`   | `boolean`                       | No       | If true, the input will take up the full width of its container |
+| `margin`      | `'none' \| 'dense' \| 'normal'` | No       | If 'dense' or 'normal', will adjust vertical spacing            |
+| `size`        | `'small' \| 'medium'`           | No       | The size of the text field                                      |
 
 ### Examples
 
@@ -1123,7 +1125,7 @@ The FormDateTextField component accepts all props from `FormDateTextFieldProps`,
 
 ```tsx
 import { Formik, Form, Field } from 'formik';
-import { FormDateTextField, FormTextField } from 'form-fields';
+import { FormDateTextField, FormTextField } from 'form-input-fields';
 import { Button } from '@mui/material';
 
 const EventForm = () => (
@@ -1132,7 +1134,7 @@ const EventForm = () => (
       eventName: '',
       eventDate: '',
     }}
-    onSubmit={(values) => {
+    onSubmit={values => {
       console.log('Form submitted:', values);
     }}
   >
@@ -1145,7 +1147,7 @@ const EventForm = () => (
           fullWidth
           margin="normal"
         />
-        
+
         <Field
           component={FormDateTextField}
           name="eventDate"
@@ -1155,13 +1157,8 @@ const EventForm = () => (
           helperText="Select the event date"
           margin="normal"
         />
-        
-        <Button
-          type="submit"
-          variant="contained"
-          color="primary"
-          disabled={isSubmitting}
-        >
+
+        <Button type="submit" variant="contained" color="primary" disabled={isSubmitting}>
           Submit
         </Button>
       </Form>
@@ -1223,13 +1220,10 @@ A flexible form field component with advanced text masking capabilities.
 ### Usage with Formik
 
 ```tsx
-import { Formik, Field } from "formik";
-import { FormMaskField } from "form-input-mask-field";
+import { Formik, Field } from 'formik';
+import { FormMaskField } from 'form-input-fields';
 
-<Formik
-  initialValues={{ phoneNumber: "", gameCode: "" }}
-  onSubmit={(values) => console.log(values)}
->
+<Formik initialValues={{ phoneNumber: '', gameCode: '' }} onSubmit={values => console.log(values)}>
   <Field
     component={FormMaskField}
     name="phoneNumber"
@@ -1263,19 +1257,34 @@ import { FormMaskField } from "form-input-mask-field";
 
 ### Props
 
-| Prop               | Type       | Default | Description                                                    |
-| ------------------ | ---------- | ------- | -------------------------------------------------------------- |
-| `mask`             | `string`   | -       | Mask pattern using the characters above                        |
-| `placeholderChar`  | `string`   | `'_'`   | Character shown in placeholder for mask positions              |
-| `toUpperCase`      | `boolean`  | `false` | Convert input to uppercase automatically                       |
-| `returnCleanValue` | `boolean`  | `false` | Return unmasked value to Formik (true) or masked value (false) |
-| `showMaskPattern`  | `boolean`  | `false` | Show the mask pattern as helper text below the input field     |
-| `showPlaceholder`  | `boolean`  | `false` | Show placeholder text with mask pattern in the input field     |
-| `onChange`         | `function` | -       | Custom change handler with masked, clean, and raw values       |
-| `variant`         | `'standard' | 'outlined' | 'filled'` | 'standard' | The variant of the MUI TextField. |
+| Prop               | Type        | Default    | Description                                                    |
+| ------------------ | ----------- | ---------- | -------------------------------------------------------------- |
+| `mask`             | `string`    | -          | Mask pattern using the characters above                        |
+| `placeholderChar`  | `string`    | `'_'`      | Character shown in placeholder for mask positions              |
+| `toUpperCase`      | `boolean`   | `false`    | Convert input to uppercase automatically                       |
+| `returnCleanValue` | `boolean`   | `false`    | Return unmasked value to Formik (true) or masked value (false) |
+| `showMaskPattern`  | `boolean`   | `false`    | Show the mask pattern as helper text below the input field     |
+| `showPlaceholder`  | `boolean`   | `false`    | Show placeholder text with mask pattern in the input field     |
+| `onChange`         | `function`  | -          | Custom change handler with masked, clean, and raw values       |
+| `variant`          | `'standard' | 'outlined' | 'filled'` | 'standard' | The variant of the MUI TextField. |
+| `sx`               | `SxProps<Theme>` | - | The system prop that allows defining system overrides as well as additional CSS styles |
 
 Plus all standard Material-UI TextField props and Formik FieldProps.
 
+#### FormMaskFieldProps Interface
+
+| Prop               | Type             | Default    | Description                                                    |
+| ------------------ | ---------------- | ---------- | -------------------------------------------------------------- |
+| `mask`             | `string`         | -          | Mask pattern using the characters above                        |
+| `placeholderChar`  | `string`         | `'_'`      | Character shown in placeholder for mask positions              |
+| `toUpperCase`      | `boolean`        | `false`    | Convert input to uppercase automatically                       |
+| `returnCleanValue` | `boolean`        | `false`    | Return unmasked value to Formik (true) or masked value (false) |
+| `showMaskPattern`  | `boolean`        | `false`    | Show the mask pattern as helper text below the input field     |
+| `showPlaceholder`  | `boolean`        | `false`    | Show placeholder text with mask pattern in the input field     |
+| `onChange`         | `function`       | -          | Custom change handler with masked, clean, and raw values       |
+| `variant`          | `'standard'      | 'outlined' | 'filled'` | 'standard' | The variant of the MUI TextField. |
+| `sx`               | `SxProps<Theme>` | -          | The system prop that allows defining system overrides as well as additional CSS styles |
+
 ### Examples
 
 #### Phone Number
@@ -1336,10 +1345,10 @@ Plus all standard Material-UI TextField props and Formik FieldProps.
   name="customField"
   label="Custom Field"
   mask="999-AAA"
-  onChange={(event) => {
-    console.log("Masked value:", event.target.value);
-    console.log("Clean value:", event.target.cleanValue);
-    console.log("Raw input:", event.target.rawValue);
+  onChange={event => {
+    console.log('Masked value:', event.target.value);
+    console.log('Clean value:', event.target.cleanValue);
+    console.log('Raw input:', event.target.rawValue);
   }}
   variant="outlined" // <-- Example with outlined variant
 />
@@ -1379,19 +1388,19 @@ Here's a comprehensive example showing how to build a complete form application
 ### App.tsx
 
 ```tsx
-import React from "react";
-import { Formik, Form, Field, FormikHelpers, FormikErrors } from "formik";
-import Container from "@mui/material/Container";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import { Grid } from "@mui/material";
-import Paper from "@mui/material/Paper";
-import Alert from "@mui/material/Alert";
-import { ThemeProvider, createTheme } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
-import { FormMaskField } from "form-input-mask-field";
-import "./App.css";
+import React from 'react';
+import { Formik, Form, Field, FormikHelpers, FormikErrors } from 'formik';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { Grid } from '@mui/material';
+import Paper from '@mui/material/Paper';
+import Alert from '@mui/material/Alert';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { FormMaskField } from 'form-input-fields';
+import './App.css';
 
 interface FormValues {
   phone: string;
@@ -1404,8 +1413,7 @@ interface FormValues {
   postalCode: string;
 }
 
-interface FormFieldEvent
-  extends Omit<React.ChangeEvent<HTMLInputElement>, "target"> {
+interface FormFieldEvent extends Omit<React.ChangeEvent<HTMLInputElement>, 'target'> {
   target: HTMLInputElement & {
     value: string;
     cleanValue: string;
@@ -1418,10 +1426,10 @@ interface FormFieldEvent
 const theme = createTheme({
   palette: {
     primary: {
-      main: "#1976d2",
+      main: '#1976d2',
     },
     secondary: {
-      main: "#dc004e",
+      main: '#dc004e',
     },
   },
 });
@@ -1431,23 +1439,23 @@ const validateForm = (values: FormValues): FormikErrors<FormValues> => {
   const errors: Partial<FormValues> = {};
 
   if (!values.phone) {
-    errors.phone = "Phone number is required";
-  } else if (values.phone.replace(/\D/g, "").length < 10) {
-    errors.phone = "Phone number must be 10 digits";
+    errors.phone = 'Phone number is required';
+  } else if (values.phone.replace(/\D/g, '').length < 10) {
+    errors.phone = 'Phone number must be 10 digits';
   }
 
   if (!values.date) {
-    errors.date = "Date is required";
+    errors.date = 'Date is required';
   }
 
   if (!values.creditCard) {
-    errors.creditCard = "Credit card is required";
-  } else if (values.creditCard.replace(/\D/g, "").length < 16) {
-    errors.creditCard = "Credit card must be 16 digits";
+    errors.creditCard = 'Credit card is required';
+  } else if (values.creditCard.replace(/\D/g, '').length < 16) {
+    errors.creditCard = 'Credit card must be 16 digits';
   }
 
   if (!values.licensePlate) {
-    errors.licensePlate = "License plate is required";
+    errors.licensePlate = 'License plate is required';
   }
 
   return errors;
@@ -1455,36 +1463,32 @@ const validateForm = (values: FormValues): FormikErrors<FormValues> => {
 
 function App() {
   const initialValues: FormValues = {
-    phone: "",
-    date: "",
-    creditCard: "",
-    licensePlate: "",
-    hexColor: "",
-    customCode: "",
-    socialSecurity: "",
-    postalCode: "",
+    phone: '',
+    date: '',
+    creditCard: '',
+    licensePlate: '',
+    hexColor: '',
+    customCode: '',
+    socialSecurity: '',
+    postalCode: '',
   };
 
-  const handleSubmit = (
-    values: FormValues,
-    { setSubmitting }: FormikHelpers<FormValues>
-  ) => {
-    console.log("Form Values:", values);
+  const handleSubmit = (values: FormValues, { setSubmitting }: FormikHelpers<FormValues>) => {
+    console.log('Form Values:', values);
     setTimeout(() => {
-      alert("Form submitted! Check console for values.");
+      alert('Form submitted! Check console for values.');
       setSubmitting(false);
     }, 400);
   };
 
-  const handleCustomChange =
-    (fieldName: keyof FormValues) => (event: FormFieldEvent) => {
-      console.log(`${fieldName} changed:`, {
-        masked: event.target.value,
-        clean: event.target.cleanValue,
-        raw: event.target.rawValue,
-      });
-      return event;
-    };
+  const handleCustomChange = (fieldName: keyof FormValues) => (event: FormFieldEvent) => {
+    console.log(`${fieldName} changed:`, {
+      masked: event.target.value,
+      clean: event.target.cleanValue,
+      raw: event.target.rawValue,
+    });
+    return event;
+  };
 
   return (
     <ThemeProvider theme={theme}>
@@ -1494,21 +1498,12 @@ function App() {
           FormMaskField Demo
         </Typography>
 
-        <Typography
-          variant="subtitle1"
-          align="center"
-          color="text.secondary"
-          paragraph
-        >
-          A comprehensive example showcasing the FormMaskField component with
-          various mask patterns and configurations
+        <Typography variant="subtitle1" align="center" color="text.secondary" paragraph>
+          A comprehensive example showcasing the FormMaskField component with various mask patterns
+          and configurations
         </Typography>
 
-        <Formik
-          initialValues={initialValues}
-          validate={validateForm}
-          onSubmit={handleSubmit}
-        >
+        <Formik initialValues={initialValues} validate={validateForm} onSubmit={handleSubmit}>
           {({ values, isSubmitting, errors, touched }) => (
             <Form>
               <Grid container spacing={3}>
@@ -1529,7 +1524,7 @@ function App() {
                           showMaskPattern={true}
                           showPlaceholder={true}
                           helperText="US phone number format"
-                          onChange={handleCustomChange("phone")}
+                          onChange={handleCustomChange('phone')}
                           variant="outlined" // <-- Example with outlined variant
                         />
                       </Grid>
@@ -1591,7 +1586,7 @@ function App() {
                           showMaskPattern={true}
                           showPlaceholder={true}
                           helperText="16-digit credit card number"
-                          onChange={handleCustomChange("creditCard")}
+                          onChange={handleCustomChange('creditCard')}
                         />
                       </Grid>
 
@@ -1605,7 +1600,7 @@ function App() {
                           showMaskPattern={true}
                           showPlaceholder={true}
                           helperText="3 letters + 3 numbers (auto uppercase)"
-                          onChange={handleCustomChange("licensePlate")}
+                          onChange={handleCustomChange('licensePlate')}
                         />
                       </Grid>
 
@@ -1634,7 +1629,7 @@ function App() {
                           showMaskPattern={true}
                           showPlaceholder={true}
                           helperText="Alphanumeric + digits + letters"
-                          onChange={handleCustomChange("customCode")}
+                          onChange={handleCustomChange('customCode')}
                         />
                       </Grid>
                     </Grid>
@@ -1653,11 +1648,11 @@ function App() {
                         variant="body2"
                         component="pre"
                         sx={{
-                          backgroundColor: "#f5f5f5",
+                          backgroundColor: '#f5f5f5',
                           p: 2,
                           borderRadius: 1,
-                          overflow: "auto",
-                          fontSize: "0.875rem",
+                          overflow: 'auto',
+                          fontSize: '0.875rem',
                         }}
                       >
                         {JSON.stringify(values, null, 2)}
@@ -1667,32 +1662,29 @@ function App() {
                 </Grid>
 
                 {/* Form Errors Display */}
-                {Object.keys(errors).length > 0 &&
-                  Object.keys(touched).length > 0 && (
-                    <Grid>
-                      <Alert severity="error">
-                        <Typography variant="h6" gutterBottom>
-                          Form Validation Errors:
-                        </Typography>
-                        <ul>
-                          {Object.entries(errors).map(
-                            ([field, error]) =>
-                              touched[field] && (
-                                <li key={field}>
-                                  <strong>{field}:</strong> {error}
-                                </li>
-                              )
-                          )}
-                        </ul>
-                      </Alert>
-                    </Grid>
-                  )}
+                {Object.keys(errors).length > 0 && Object.keys(touched).length > 0 && (
+                  <Grid>
+                    <Alert severity="error">
+                      <Typography variant="h6" gutterBottom>
+                        Form Validation Errors:
+                      </Typography>
+                      <ul>
+                        {Object.entries(errors).map(
+                          ([field, error]) =>
+                            touched[field] && (
+                              <li key={field}>
+                                <strong>{field}:</strong> {error}
+                              </li>
+                            ),
+                        )}
+                      </ul>
+                    </Alert>
+                  </Grid>
+                )}
 
                 {/* Submit Button */}
                 <Grid>
-                  <Box
-                    sx={{ display: "flex", justifyContent: "center", mt: 2 }}
-                  >
+                  <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
                     <Button
                       type="submit"
                       variant="contained"
@@ -1700,7 +1692,7 @@ function App() {
                       disabled={isSubmitting}
                       sx={{ minWidth: 200 }}
                     >
-                      {isSubmitting ? "Submitting..." : "Submit Form"}
+                      {isSubmitting ? 'Submitting...' : 'Submit Form'}
                     </Button>
                   </Box>
                 </Grid>
@@ -1801,8 +1793,64 @@ If you like my work, you can support me here:
 
 [![Buy Me a book](https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png)](https://coff.ee/vavanv)
 
+## Testing
+
+This package includes comprehensive test coverage for all form controls, ensuring reliability and proper functionality. Tests are written using Jest and React Testing Library.
+
+### Test Coverage
+
+- **FormTextField**: 100+ test cases covering basic rendering, input handling, Formik integration, error handling, accessibility, and sx prop support
+- **FormDropDownField**: Complete test suite for dropdown functionality, validation, and styling
+- **FormDateField**: Tests for date picker integration, validation, and formatting
+- **FormDateTextField**: Text-based date input testing with various formats
+- **FormMaskField**: Extensive masking functionality tests including pattern validation and custom handlers
+- **FormCheckboxField**: Checkbox state management and Formik integration tests
+- **FormSwitch**: Switch component testing with various configurations
+
+### Running Tests
+
+```bash
+# Run all tests
+npm test
+
+# Run tests in watch mode
+npm run test:watch
+
+# Run tests with coverage
+npm run test:coverage
+
+# Run tests in debug mode
+npm run test:debug
+```
+
 ## History
 
+### 2025-11-10 - Enhanced Styling Support and Standardized Form Controls
+
+#### Added `sx` prop support to all form controls
+
+All form controls now support the `sx` prop for custom styling, providing a powerful and flexible way to apply styles directly to your form components:
+
+- `FormTextField`
+- `FormCheckboxField`
+- `FormDateField`
+- `FormDateTextField`
+- `FormDropDownField`
+- `FormMaskField`
+- `FormSwitch`
+
+The `sx` prop follows Material-UI's sx system, allowing you to use CSS properties, theme values, and responsive design patterns.
+
+#### Standardized FormControl wrapper pattern
+
+All form controls now use a standardized `FormControl` wrapper pattern, ensuring consistent behavior, accessibility, and styling across all form components. This provides:
+
+- Consistent structure across all form controls
+- Improved accessibility with proper labeling and ARIA attributes
+- Unified error display and management
+- Better integration with Material-UI's styling system
+- Enhanced Formik form state management
+
 ### Added `variant` prop to controls
 
 The following controls now accept a `variant` prop (`'standard' | 'outlined' | 'filled'`), which is passed to the underlying MUI TextField. The default is `'standard'`:
@@ -1812,3 +1860,258 @@ The following controls now accept a `variant` prop (`'standard' | 'outlined' | '
 - `FormMaskField`
 
 This allows you to easily switch between Material-UI's standard, outlined, and filled input styles for these components.
+
+---
+
+## Styling Form Controls
+
+### sx Prop Support
+
+All form controls now support the `sx` prop for custom styling, providing a powerful and flexible way to apply styles directly to your form components. The `sx` prop follows Material-UI's sx system, allowing you to use CSS properties, theme values, and responsive design patterns.
+
+#### Benefits of the sx Prop
+
+- **Direct Styling**: Apply styles without creating separate CSS files or styled components
+- **Theme Integration**: Access to your Material-UI theme values (colors, spacing, breakpoints)
+- **Responsive Design**: Easily apply different styles at different breakpoints
+- **Dynamic Styling**: Use conditional styling based on component state or props
+- **Performance**: Optimized style application by Material-UI
+
+#### Using the sx Prop with Form Controls
+
+```tsx
+import { Formik, Field } from 'formik';
+import { FormTextField, FormDropDownField, FormSwitch } from 'form-input-fields';
+
+// Basic sx prop usage
+<Field
+  component={FormTextField}
+  name="username"
+  label="Username"
+  sx={{
+    backgroundColor: 'background.paper',
+    borderRadius: 2,
+    '& .MuiOutlinedInput-root': {
+      '& fieldset': {
+        borderColor: 'primary.main',
+      },
+    },
+  }}
+/>
+
+// Responsive styling with sx
+<Field
+  component={FormDropDownField}
+  name="category"
+  label="Category"
+  items={categories}
+  sx={{
+    width: { xs: '100%', md: '50%' },
+    mx: { xs: 0, md: 2 },
+  }}
+/>
+
+// Conditional styling with sx
+<Field
+  component={FormSwitch}
+  name="notifications"
+  label="Enable Notifications"
+  sx={{
+    '& .MuiSwitch-switchBase.Mui-checked': {
+      color: 'success.main',
+    },
+    '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+      backgroundColor: 'success.main',
+    },
+  }}
+/>
+```
+
+### FormControl Wrapper Pattern
+
+All form controls now use a standardized `FormControl` wrapper pattern, ensuring consistent behavior, accessibility, and styling across all form components. This pattern provides:
+
+- **Consistent Structure**: All form controls follow the same DOM structure
+- **Accessibility**: Proper labeling and ARIA attributes
+- **Error Handling**: Consistent error display and management
+- **Styling Integration**: Seamless integration with Material-UI's styling system
+
+#### FormControl Wrapper Benefits
+
+1. **Consistent Labeling**: All controls properly associate labels with form inputs
+2. **Error State Management**: Unified error display and styling
+3. **Helper Text**: Consistent helper text positioning and styling
+4. **Form Integration**: Better integration with Formik's form state management
+5. **Accessibility**: Improved screen reader support and keyboard navigation
+
+#### Example: FormControl Wrapper in Action
+
+```tsx
+// Before (inconsistent structure)
+<div className="custom-field">
+  <label>Field Label</label>
+  <input />
+  <span className="error">Error message</span>
+</div>
+
+// After (standardized FormControl wrapper)
+<FormControl
+  error={hasError}
+  fullWidth
+  variant="outlined"
+  sx={{ mb: 2 }}
+>
+  <InputLabel htmlFor="field-id">Field Label</InputLabel>
+  <Field
+    component={FormTextField}
+    id="field-id"
+    name="fieldName"
+    label="Field Label"
+  />
+  <FormHelperText>{hasError ? errorMessage : helperText}</FormHelperText>
+</FormControl>
+```
+
+### Advanced Styling Examples
+
+#### Custom Theme Integration
+
+```tsx
+import { useTheme } from '@mui/material/styles';
+
+function ThemedForm() {
+  const theme = useTheme();
+
+  return (
+    <Field
+      component={FormTextField}
+      name="customField"
+      label="Custom Styled Field"
+      sx={{
+        // Using theme values
+        backgroundColor: theme.palette.grey[50],
+        borderColor: theme.palette.primary.main,
+
+        // Hover effects
+        '&:hover': {
+          backgroundColor: theme.palette.grey[100],
+        },
+
+        // Focus styles
+        '& .Mui-focused': {
+          borderColor: theme.palette.secondary.main,
+        },
+
+        // Custom styles for different states
+        '&.Mui-error': {
+          borderColor: theme.palette.error.main,
+        },
+      }}
+    />
+  );
+}
+```
+
+#### Responsive Form Layout
+
+```tsx
+<Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap: 2 }}>
+  <Field
+    component={FormTextField}
+    name="firstName"
+    label="First Name"
+    sx={{
+      flex: 1,
+      // Mobile-first responsive design
+      minWidth: { xs: '100%', sm: 200 },
+    }}
+  />
+
+  <Field
+    component={FormTextField}
+    name="lastName"
+    label="Last Name"
+    sx={{
+      flex: 1,
+      minWidth: { xs: '100%', sm: 200 },
+    }}
+  />
+</Box>
+```
+
+#### Conditional Styling Based on State
+
+```tsx
+<Field
+  component={FormSwitch}
+  name="premiumFeature"
+  label="Enable Premium Features"
+  sx={{
+    // Style based on checked state
+    '& .MuiSwitch-switchBase': {
+      color: theme => (premiumEnabled ? theme.palette.success.main : 'default'),
+    },
+
+    // Animation for state changes
+    transition: 'all 0.3s ease',
+
+    // Custom styling when disabled
+    '&.Mui-disabled': {
+      opacity: 0.6,
+    },
+  }}
+/>
+```
+
+### Best Practices for Styling Form Controls
+
+1. **Use Theme Values**: Always prefer theme values over hardcoded colors and sizes
+2. **Responsive Design**: Use breakpoints to ensure your forms work on all screen sizes
+3. **Consistent Spacing**: Use the spacing scale for margins and padding
+4. **Accessibility**: Ensure color contrast and focus states are properly styled
+5. **Performance**: Avoid overly complex selectors in the sx prop for better performance
+
+### Migration Guide
+
+If you're upgrading from a previous version, here's how to migrate to the new styling system:
+
+#### Old Approach (Custom CSS Classes)
+
+```tsx
+// Before
+<Field component={FormTextField} name="username" className="custom-text-field" label="Username" />
+```
+
+```css
+/* In your CSS file */
+.custom-text-field {
+  background-color: #f5f5f5;
+  border-radius: 8px;
+}
+
+.custom-text-field .MuiOutlinedInput-root {
+  border-color: #1976d2;
+}
+```
+
+#### New Approach (sx Prop)
+
+```tsx
+// After
+<Field
+  component={FormTextField}
+  name="username"
+  label="Username"
+  sx={{
+    backgroundColor: 'background.paper',
+    borderRadius: 2,
+    '& .MuiOutlinedInput-root': {
+      '& fieldset': {
+        borderColor: 'primary.main',
+      },
+    },
+  }}
+/>
+```
+
+The new approach provides better theme integration, responsive design capabilities, and improved maintainability.