diff --git a/packages/ketchup-react/src/index.ts b/packages/ketchup-react/src/index.ts
index f6b43e3781..3442a8c789 100644
--- a/packages/ketchup-react/src/index.ts
+++ b/packages/ketchup-react/src/index.ts
@@ -44,6 +44,7 @@ export const KupHorizontalScroll = /*@__PURE__*/createReactComponent<JSX.KupHori
 export const KupIframe = /*@__PURE__*/createReactComponent<JSX.KupIframe, HTMLKupIframeElement>('kup-iframe');
 export const KupImage = /*@__PURE__*/createReactComponent<JSX.KupImage, HTMLKupImageElement>('kup-image');
 export const KupImageList = /*@__PURE__*/createReactComponent<JSX.KupImageList, HTMLKupImageListElement>('kup-image-list');
+export const KupInputPanel = /*@__PURE__*/createReactComponent<JSX.KupInputPanel, HTMLKupInputPanelElement>('kup-input-panel');
 export const KupLazy = /*@__PURE__*/createReactComponent<JSX.KupLazy, HTMLKupLazyElement>('kup-lazy');
 export const KupList = /*@__PURE__*/createReactComponent<JSX.KupList, HTMLKupListElement>('kup-list');
 export const KupMagicBox = /*@__PURE__*/createReactComponent<JSX.KupMagicBox, HTMLKupMagicBoxElement>('kup-magic-box');
diff --git a/packages/ketchup/src/assets/index.js b/packages/ketchup/src/assets/index.js
index 4ac29e31cb..d8d7b41b86 100644
--- a/packages/ketchup/src/assets/index.js
+++ b/packages/ketchup/src/assets/index.js
@@ -142,6 +142,10 @@ components.data = [
         value: 'Image list',
         id: 'image-list.html',
     },
+    {
+        value: 'Input panel',
+        id: 'input-panel.html',
+    },
     {
         value: 'KupData',
         id: 'kupdata.html',
diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js
new file mode 100644
index 0000000000..8cd626a28d
--- /dev/null
+++ b/packages/ketchup/src/assets/input-panel.js
@@ -0,0 +1,215 @@
+const data = {
+    columns: [
+        {
+            name: 'NAM',
+            title: 'Name',
+            visible: true,
+        },
+        {
+            name: 'SUR',
+            title: 'Surname',
+            visible: true,
+        },
+        {
+            name: 'COL',
+            title: 'Color Shirt',
+            visible: true,
+        },
+        {
+            name: 'NAT',
+            title: 'Nation',
+            visible: true,
+        },
+        {
+            name: 'CIT',
+            title: 'City',
+            visible: true,
+        },
+        {
+            name: 'CAM',
+            title: 'Campionato vinto',
+            visible: true,
+        },
+        {
+            name: 'CHA',
+            title: 'Chart',
+            visible: false,
+        },
+        {
+            name: 'CHI',
+            title: 'Chip',
+            visible: true,
+        },
+        {
+            name: 'BUT',
+            title: 'Buttons list',
+            visible: false,
+        },
+    ],
+    rows: [
+        {
+            cells: {
+                NAM: {
+                    value: 'Francesco',
+                    obj: {
+                        t: '',
+                        p: '',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                    shape: 'ITX',
+                },
+                SUR: {
+                    value: 'Totti',
+                    obj: {
+                        t: '',
+                        p: '',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                    shape: 'INF',
+                },
+                COL: {
+                    value: '#8E1F2F',
+                    obj: {
+                        t: 'J1',
+                        p: 'COL',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                    // shape: 'CLP',
+                },
+                NAT: {
+                    value: 'It',
+                    options: [
+                        { id: 'It', label: 'Italy' },
+                        { id: 'Sp', label: 'Spain' },
+                    ],
+                    obj: {
+                        t: '',
+                        p: '',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                    shape: 'CMB',
+                },
+                CIT: {
+                    value: 'Rom',
+                    obj: {
+                        t: '',
+                        p: '',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                    options: [
+                        { id: 'Rom', label: 'Roma' },
+                        { id: 'Flam', label: 'Flaminio' },
+                        { id: 'PorMet', label: 'Porta Metronia' },
+                        { id: 'Garbat', label: 'Garbatella' },
+                    ],
+                    shape: 'ACP',
+                },
+                CAM: {
+                    value: 'on',
+                    obj: {
+                        t: 'V2',
+                        p: 'SI/NO',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                    // shape: 'CHK',
+                },
+                CHA: {
+                    data: {
+                        sizeX: '50px',
+                        offlineMode: {
+                            value: '8;4;5',
+                        },
+                        id: 'i1012_GREF_0',
+                        cellId: 'i1012_GREF_0',
+                        sizeY: '50px',
+                    },
+                    obj: {
+                        k: '8;4;5',
+                        p: 'GRA_PIE',
+                        t: 'J4',
+                    },
+                    shape: 'Gra',
+                    value: '8;4;5',
+                },
+                CHI: {
+                    // data: {},
+                    shape: 'CHI',
+                    value: 'Chipp',
+                },
+                BUT: {
+                    cssClass: 'strong-text',
+                    data: {
+                        data: [
+                            {
+                                children: [
+                                    {
+                                        children: [],
+                                        disabled: false,
+                                        expandable: false,
+                                        icon: 'lightbulb-outline',
+                                        isExpanded: false,
+                                        obj: {
+                                            k: '000050',
+                                            p: 'COD_VER',
+                                            t: 'VO',
+                                        },
+                                        options: false,
+                                        value: 'Collaboratore',
+                                    },
+                                    {
+                                        children: [],
+                                        disabled: false,
+                                        expandable: false,
+                                        icon: 'briefcase',
+                                        isExpanded: false,
+                                        obj: {
+                                            k: '000050',
+                                            p: 'COD_VER',
+                                            t: 'VO',
+                                        },
+                                        options: false,
+                                        value: 'Azienda',
+                                    },
+                                ],
+                                data: {
+                                    dropdownOnly: true,
+                                },
+                                disabled: false,
+                                expandable: false,
+                                isExpanded: false,
+                                options: false,
+                            },
+                        ],
+                        customStyle:
+                            ' #kup-component button { padding: 0; font-size: 0.65em; } ',
+                        icon: 'settings',
+                        className: 'kup-slim',
+                    },
+                    editable: true,
+                    obj: {
+                        k: '000050',
+                        p: 'COD_VER',
+                        t: 'VO',
+                    },
+                    shape: 'BTN',
+                    value: '',
+                },
+            },
+        },
+    ],
+};
+
+const inputPanel = document.getElementById('input-panel');
+inputPanel.data = data;
diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
index 42bb22f4e8..5d2bf6aa39 100644
--- a/packages/ketchup/src/components.d.ts
+++ b/packages/ketchup/src/components.d.ts
@@ -43,6 +43,7 @@ import { FImageData } from "./f-components/f-image/f-image-declarations";
 import { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations";
 import { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations";
 import { KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations";
+import { KupInputPanelData } from "./components/kup-input-panel/kup-input-panel-declarations";
 import { KupLazyRender } from "./components/kup-lazy/kup-lazy-declarations";
 import { KupNavBarStyling } from "./components/kup-nav-bar/kup-nav-bar-declarations";
 import { KupNumericPickerEventPayload } from "./components/kup-numeric-picker/kup-numeric-picker-declarations";
@@ -93,6 +94,7 @@ export { FImageData } from "./f-components/f-image/f-image-declarations";
 export { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations";
 export { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations";
 export { KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations";
+export { KupInputPanelData } from "./components/kup-input-panel/kup-input-panel-declarations";
 export { KupLazyRender } from "./components/kup-lazy/kup-lazy-declarations";
 export { KupNavBarStyling } from "./components/kup-nav-bar/kup-nav-bar-declarations";
 export { KupNumericPickerEventPayload } from "./components/kup-numeric-picker/kup-numeric-picker-declarations";
@@ -2563,6 +2565,29 @@ export namespace Components {
         "stateId": string;
         "store": KupStore;
     }
+    interface KupInputPanel {
+        /**
+          * Custom style of the component.
+          * @default ""
+          * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+         */
+        "customStyle": string;
+        /**
+          * Actual data of the form.
+          * @default null
+         */
+        "data": KupInputPanelData;
+        /**
+          * Creates a hidden submit button in order to submit the form with enter.
+          * @default false
+         */
+        "hiddenSubmitButton": boolean;
+        /**
+          * Sets the callback function on submit form
+          * @default null
+         */
+        "submitCb": (e: SubmitEvent) => unknown;
+    }
     interface KupLazy {
         /**
           * Sets the tag name of the component to be lazy loaded.
@@ -4163,6 +4188,10 @@ export interface KupImageListCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKupImageListElement;
 }
+export interface KupInputPanelCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKupInputPanelElement;
+}
 export interface KupLazyCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKupLazyElement;
@@ -4809,6 +4838,23 @@ declare global {
         prototype: HTMLKupImageListElement;
         new (): HTMLKupImageListElement;
     };
+    interface HTMLKupInputPanelElementEventMap {
+        "kup-input-panel-ready": KupEventPayload;
+    }
+    interface HTMLKupInputPanelElement extends Components.KupInputPanel, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLKupInputPanelElementEventMap>(type: K, listener: (this: HTMLKupInputPanelElement, ev: KupInputPanelCustomEvent<HTMLKupInputPanelElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLKupInputPanelElementEventMap>(type: K, listener: (this: HTMLKupInputPanelElement, ev: KupInputPanelCustomEvent<HTMLKupInputPanelElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLKupInputPanelElement: {
+        prototype: HTMLKupInputPanelElement;
+        new (): HTMLKupInputPanelElement;
+    };
     interface HTMLKupLazyElementEventMap {
         "kup-lazy-loaded": KupEventPayload;
     }
@@ -5230,6 +5276,7 @@ declare global {
         "kup-iframe": HTMLKupIframeElement;
         "kup-image": HTMLKupImageElement;
         "kup-image-list": HTMLKupImageListElement;
+        "kup-input-panel": HTMLKupInputPanelElement;
         "kup-lazy": HTMLKupLazyElement;
         "kup-list": HTMLKupListElement;
         "kup-magic-box": HTMLKupMagicBoxElement;
@@ -7297,6 +7344,33 @@ declare namespace LocalJSX {
         "stateId"?: string;
         "store"?: KupStore;
     }
+    interface KupInputPanel {
+        /**
+          * Custom style of the component.
+          * @default ""
+          * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+         */
+        "customStyle"?: string;
+        /**
+          * Actual data of the form.
+          * @default null
+         */
+        "data"?: KupInputPanelData;
+        /**
+          * Creates a hidden submit button in order to submit the form with enter.
+          * @default false
+         */
+        "hiddenSubmitButton"?: boolean;
+        /**
+          * When component load is complete
+         */
+        "onKup-input-panel-ready"?: (event: KupInputPanelCustomEvent<KupEventPayload>) => void;
+        /**
+          * Sets the callback function on submit form
+          * @default null
+         */
+        "submitCb"?: (e: SubmitEvent) => unknown;
+    }
     interface KupLazy {
         /**
           * Sets the tag name of the component to be lazy loaded.
@@ -8622,6 +8696,7 @@ declare namespace LocalJSX {
         "kup-iframe": KupIframe;
         "kup-image": KupImage;
         "kup-image-list": KupImageList;
+        "kup-input-panel": KupInputPanel;
         "kup-lazy": KupLazy;
         "kup-list": KupList;
         "kup-magic-box": KupMagicBox;
@@ -8692,6 +8767,7 @@ declare module "@stencil/core" {
             "kup-iframe": LocalJSX.KupIframe & JSXBase.HTMLAttributes<HTMLKupIframeElement>;
             "kup-image": LocalJSX.KupImage & JSXBase.HTMLAttributes<HTMLKupImageElement>;
             "kup-image-list": LocalJSX.KupImageList & JSXBase.HTMLAttributes<HTMLKupImageListElement>;
+            "kup-input-panel": LocalJSX.KupInputPanel & JSXBase.HTMLAttributes<HTMLKupInputPanelElement>;
             "kup-lazy": LocalJSX.KupLazy & JSXBase.HTMLAttributes<HTMLKupLazyElement>;
             "kup-list": LocalJSX.KupList & JSXBase.HTMLAttributes<HTMLKupListElement>;
             "kup-magic-box": LocalJSX.KupMagicBox & JSXBase.HTMLAttributes<HTMLKupMagicBoxElement>;
diff --git a/packages/ketchup/src/components/kup-card/readme.md b/packages/ketchup/src/components/kup-card/readme.md
index 2222af06e7..c464ae87f5 100644
--- a/packages/ketchup/src/components/kup-card/readme.md
+++ b/packages/ketchup/src/components/kup-card/readme.md
@@ -126,6 +126,7 @@ Type: `Promise<void>`
  - [kup-iframe](../kup-iframe)
  - [kup-image](../kup-image)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-lazy](../kup-lazy)
  - [kup-list](../kup-list)
  - [kup-magic-box](../kup-magic-box)
@@ -217,6 +218,7 @@ graph TD;
   kup-grid --> kup-card
   kup-iframe --> kup-card
   kup-image-list --> kup-card
+  kup-input-panel --> kup-card
   kup-lazy --> kup-card
   kup-magic-box --> kup-card
   kup-nav-bar --> kup-card
diff --git a/packages/ketchup/src/components/kup-dialog/readme.md b/packages/ketchup/src/components/kup-dialog/readme.md
index bddc34b304..751b1dc6be 100644
--- a/packages/ketchup/src/components/kup-dialog/readme.md
+++ b/packages/ketchup/src/components/kup-dialog/readme.md
@@ -130,6 +130,7 @@ Type: `Promise<void>`
  - [kup-iframe](../kup-iframe)
  - [kup-image](../kup-image)
  - [kup-image-list](../kup-image-list)
+ - [kup-input-panel](../kup-input-panel)
  - [kup-lazy](../kup-lazy)
  - [kup-list](../kup-list)
  - [kup-magic-box](../kup-magic-box)
@@ -199,6 +200,7 @@ graph TD;
   kup-grid --> kup-dialog
   kup-iframe --> kup-dialog
   kup-image-list --> kup-dialog
+  kup-input-panel --> kup-dialog
   kup-lazy --> kup-dialog
   kup-magic-box --> kup-dialog
   kup-nav-bar --> kup-dialog
diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
new file mode 100644
index 0000000000..84885ab258
--- /dev/null
+++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts
@@ -0,0 +1,67 @@
+import {
+    KupDataCell,
+    KupDataColumn,
+} from '../../managers/kup-data/kup-data-declarations';
+
+export interface KupInputPanelData {
+    columns?: KupDataColumn[];
+    rows?: KupInputPanelRow[];
+}
+
+export interface KupInputPanelColumn {
+    name: string;
+    title: string;
+    visible?: boolean;
+}
+
+export interface KupInputPanelRow {
+    cells?: KupInputPanelRowCells;
+    layout?: KupInputPanelLayout;
+}
+
+export interface KupInputPanelRowCells {
+    [key: string]: KupInputPanelCell;
+}
+
+export interface KupInputPanelCell extends KupDataCell {
+    // TODO tipizzare dopo validazione da SMEUP
+    options?: { id: string; label: string }[];
+    editable?: boolean;
+    mandatory?: boolean;
+    fun?: string;
+}
+
+export interface KupInputPanelLayout {
+    horizontal?: boolean;
+    sections?: KupInputPanelLayoutSection[];
+}
+
+export interface KupInputPanelLayoutSection {
+    id?: string;
+    content?: KupInputPanelLayoutField[];
+    sections?: KupInputPanelLayoutSection[];
+    dim?: string;
+    horizontal?: boolean;
+    gridCols?: number;
+    gridRows?: number;
+    gap?: number;
+}
+
+export interface KupInputPanelLayoutField {
+    id: string;
+    colSpan?: number;
+    colStart?: number;
+    colEnd?: number;
+    rowSpan?: number;
+    rowStart?: number;
+    rowEnd?: number;
+}
+
+export type DataAdapterFn = (
+    options: {
+        id: string;
+        label: string;
+    }[],
+    fieldLabel: string,
+    currentValue: string
+) => Object;
diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss
new file mode 100644
index 0000000000..1611ec6300
--- /dev/null
+++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss
@@ -0,0 +1,6 @@
+.input-panel {
+  .f-cell .f-checkbox .checkbox .checkbox__native-control {
+    height: 40px;
+    width: 40px;
+  }
+}
\ No newline at end of file
diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
new file mode 100644
index 0000000000..9bede0804f
--- /dev/null
+++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
@@ -0,0 +1,415 @@
+import {
+    Component,
+    Element,
+    Event,
+    EventEmitter,
+    Host,
+    Prop,
+    VNode,
+    Watch,
+    h,
+} from '@stencil/core';
+import {
+    DataAdapterFn,
+    KupInputPanelCell,
+    KupInputPanelColumn,
+    KupInputPanelData,
+    KupInputPanelRow,
+} from './kup-input-panel-declarations';
+import {
+    KupManager,
+    kupManagerInstance,
+} from '../../managers/kup-manager/kup-manager';
+import { KupComponent, KupEventPayload } from '../../types/GenericTypes';
+import { componentWrapperId } from '../../variables/GenericVariables';
+import { FButton } from '../../f-components/f-button/f-button';
+import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
+import {
+    FCellProps,
+    FCellTypes,
+} from '../../f-components/f-cell/f-cell-declarations';
+import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
+import { FCell } from '../../f-components/f-cell/f-cell';
+import { KupDom } from '../../managers/kup-manager/kup-manager-declarations';
+
+const dom: KupDom = document.documentElement as KupDom;
+@Component({
+    tag: 'kup-input-panel',
+    styleUrl: 'kup-input-panel.scss',
+    shadow: true,
+})
+export class KupInputPanel {
+    /**
+     * References the root HTML element of the component (<kup-form>).
+     */
+    @Element() rootElement: HTMLElement;
+
+    //#region PROPS
+    /*-------------------------------------------------*/
+    /*                    P r o p s                    */
+    /*-------------------------------------------------*/
+
+    /**
+     * Custom style of the component.
+     * @default ""
+     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+     */
+    @Prop() customStyle: string = '';
+
+    /**
+     * Actual data of the form.
+     * @default null
+     */
+    @Prop() data: KupInputPanelData = null;
+
+    /**
+     * Creates a hidden submit button in order to submit the form with enter.
+     * @default false
+     */
+    @Prop() hiddenSubmitButton: boolean = false;
+
+    /**
+     * Sets the callback function on submit form
+     * @default null
+     */
+    @Prop() submitCb: (e: SubmitEvent) => unknown = null;
+    //#endregion
+
+    //#region VARIABLES
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+
+    #kupManager: KupManager = kupManagerInstance();
+    //#endregion
+
+    //#region WATCHERS
+    /*-------------------------------------------------*/
+    /*                  W a t c h e r s                */
+    /*-------------------------------------------------*/
+
+    @Watch('data')
+    onDataChanged() {
+        console.log('data changed', this.data);
+    }
+    //#endregion
+
+    //#region PUBLIC METHODS
+    /*-------------------------------------------------*/
+    /*           P u b l i c   M e t h o d s           */
+    /*-------------------------------------------------*/
+
+    // TODO ADD METHODS HERE
+    //#endregion
+
+    //#region EVENTS
+    /*-------------------------------------------------*/
+    /*           Events                                */
+    /*-------------------------------------------------*/
+
+    /**
+     * When component load is complete
+     */
+    @Event({
+        eventName: 'kup-input-panel-ready',
+        composed: true,
+        cancelable: false,
+        bubbles: true,
+    })
+    kupReady: EventEmitter<KupEventPayload>;
+    //#endregion
+
+    //#region PRIVATE METHODS
+    /*-------------------------------------------------*/
+    /*           P r i v a t e   M e t h o d s         */
+    /*-------------------------------------------------*/
+
+    #renderRow(row: KupInputPanelRow) {
+        // todo layout
+        const horizontal = row.layout?.horizontal || false;
+
+        const rowContent: VNode[] = this.data.columns
+            .filter((col) => col.visible)
+            .map((col) => {
+                const cell = row.cells[col.name];
+
+                const mappedCell = {
+                    ...cell,
+                    data: this.#mapData(cell, col),
+                    isEditable: cell.editable,
+                };
+
+                return this.#renderCell(mappedCell, row, col);
+            });
+
+        const classObj = {
+            form: true,
+            'input-panel': true,
+            'form--column': !horizontal,
+        };
+
+        return (
+            <form
+                class={classObj}
+                name={this.rootElement.id}
+                onSubmit={this.submitCb}
+            >
+                {rowContent}
+                {this.hiddenSubmitButton ? (
+                    <FButton
+                        buttonType="submit"
+                        label={this.#kupManager.language.translate(
+                            KupLanguageGeneric.CONFIRM
+                        )}
+                        wrapperClass="form__submit"
+                    ></FButton>
+                ) : null}
+            </form>
+        );
+    }
+
+    #renderCell(
+        cell: KupInputPanelCell,
+        row: KupInputPanelRow,
+        column: KupInputPanelColumn
+    ) {
+        const cellProps: FCellProps = {
+            cell,
+            column,
+            row,
+            component: this,
+            editable: cell.editable,
+            renderKup: true,
+            setSizes: true,
+        };
+        return <FCell {...cellProps} />;
+    }
+
+    #mapData(cell: KupInputPanelCell, col: KupInputPanelColumn) {
+        const options = cell.options;
+        const fieldLabel = col.title;
+        const currentValue = cell.value;
+        const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
+
+        const dataAdapterMap = new Map<FCellTypes, DataAdapterFn>([
+            [FCellTypes.AUTOCOMPLETE, this.#CMBandACPAdapter],
+            [FCellTypes.BUTTON_LIST, this.#BTNAdapter],
+            [FCellTypes.CHART, this.#GRAAdapter],
+            [FCellTypes.CHIP, this.#CHIAdapter],
+            [FCellTypes.CHECKBOX, this.#CHKAdapter],
+            [FCellTypes.COLOR_PICKER, this.#CLPAdapter],
+            [FCellTypes.COMBOBOX, this.#CMBandACPAdapter],
+            [FCellTypes.STRING, this.#ITXAdapter],
+        ]);
+
+        const adapter = dataAdapterMap.get(cellType);
+        console.log(cellType, cell.shape, adapter === undefined);
+
+        return adapter ? adapter(options, fieldLabel, currentValue) : null;
+    }
+
+    #CHIAdapter(
+        _options: {
+            id: string;
+            label: string;
+        }[],
+        _fieldLabel: string,
+        _currentValue: string
+    ) {
+        return { data: [{ value: 'Valore1' }], title: 'Chippp' };
+        // return {
+        //     data: {
+        //         label: 'CHipp',
+        //     },
+        //     label: fieldLabel,
+        // };
+    }
+
+    #GRAAdapter() {
+        //TODO: definire mapping
+        return {
+            data: {
+                sizeX: '50px',
+                offlineMode: {
+                    value: '8;4;5',
+                },
+                id: 'i1012_GREF_0',
+                cellId: 'i1012_GREF_0',
+                sizeY: '50px',
+            },
+        };
+    }
+
+    #BTNAdapter(
+        _options: {
+            id: string;
+            label: string;
+        }[],
+        _fieldLabel: string,
+        _currentValue: string
+    ) {
+        //TODO: come gestire i button list dal protocollo?
+        return {
+            data: [
+                {
+                    // children: [
+                    //     {
+                    //         children: [],
+                    //         disabled: false,
+                    //         expandable: false,
+                    //         icon: 'lightbulb-outline',
+                    //         isExpanded: false,
+                    //         obj: {
+                    //             k: '000050',
+                    //             p: 'COD_VER',
+                    //             t: 'VO',
+                    //         },
+                    //         options: false,
+                    //         value: 'Collaboratore',
+                    //     },
+                    // ],
+                    data: { dropdownOnly: false, label: 'Pier' },
+                },
+                { data: { dropdownOnly: false, label: 'Valerio' } },
+            ],
+        };
+    }
+
+    #CMBandACPAdapter(
+        options: {
+            id: string;
+            label: string;
+        }[],
+        fieldLabel: string,
+        currentValue: string
+    ) {
+        return {
+            data: {
+                'kup-text-field': {
+                    trailingIcon: true,
+                    label: fieldLabel,
+                    icon: 'arrow_drop_down',
+                },
+                'kup-list': {
+                    showIcons: true,
+                    data: options?.length
+                        ? options.map(({ id, label }) => ({
+                              value: label,
+                              id,
+                              selected: currentValue === id,
+                          }))
+                        : [],
+                },
+            },
+            label: fieldLabel,
+        };
+    }
+
+    #CHKAdapter(
+        _options: {
+            id: string;
+            label: string;
+        }[],
+        fieldLabel: string,
+        currentValue: string
+    ) {
+        return {
+            checked: currentValue === 'on' || currentValue === '1',
+            label: fieldLabel,
+        };
+    }
+
+    #CLPAdapter(
+        _options: {
+            id: string;
+            label: string;
+        }[],
+        fieldLabel: string,
+        _currentValue: string
+    ) {
+        return {
+            data: {
+                'kup-text-field': {
+                    label: fieldLabel,
+                },
+            },
+        };
+    }
+
+    #ITXAdapter(
+        _options: {
+            id: string;
+            label: string;
+        }[],
+        fieldLabel: string,
+        _currentValue: string
+    ) {
+        return { label: fieldLabel };
+    }
+
+    //#endregion
+
+    //#region LIFECYCLE HOOKS
+    /*-------------------------------------------------*/
+    /*          L i f e c y c l e   H o o k s          */
+    /*-------------------------------------------------*/
+
+    componentWillLoad() {
+        this.#kupManager.debug.logLoad(this, false);
+        this.#kupManager.language.register(this);
+        this.#kupManager.theme.register(this);
+        this.onDataChanged();
+    }
+
+    componentDidLoad() {
+        this.kupReady.emit({ comp: this, id: this.rootElement.id });
+        this.#kupManager.debug.logLoad(this, true);
+    }
+
+    componentWillRender() {
+        this.#kupManager.debug.logRender(this, false);
+    }
+
+    componentDidRender() {
+        const root: ShadowRoot = this.rootElement.shadowRoot;
+        if (root) {
+            const fs: NodeListOf<HTMLElement> =
+                root.querySelectorAll('.f-text-field');
+            for (let index = 0; index < fs.length; index++) {
+                FTextFieldMDC(fs[index]);
+            }
+        }
+        this.#kupManager.debug.logRender(this, true);
+    }
+
+    render() {
+        const isEmptyData = Boolean(!this.data.rows?.length);
+
+        const inputPanelContent: VNode[] = isEmptyData
+            ? [
+                  <p>
+                      {this.#kupManager.language.translate(
+                          KupLanguageGeneric.EMPTY_DATA
+                      )}
+                  </p>,
+              ]
+            : this.data.rows?.map((row) => this.#renderRow(row));
+
+        return (
+            <Host>
+                <style>
+                    {this.#kupManager.theme.setKupStyle(
+                        this.rootElement as KupComponent
+                    )}
+                </style>
+                <div id={componentWrapperId}>{inputPanelContent}</div>
+            </Host>
+        );
+    }
+
+    disconnectedCallback() {
+        this.#kupManager.language.unregister(this);
+        this.#kupManager.theme.unregister(this);
+    }
+    //#endregion
+}
diff --git a/packages/ketchup/src/components/kup-input-panel/readme.md b/packages/ketchup/src/components/kup-input-panel/readme.md
new file mode 100644
index 0000000000..114201a447
--- /dev/null
+++ b/packages/ketchup/src/components/kup-input-panel/readme.md
@@ -0,0 +1,176 @@
+# kup-input-panel
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute      | Description                    | Type                | Default |
+| ------------- | -------------- | ------------------------------ | ------------------- | ------- |
+| `customStyle` | `custom-style` | Custom style of the component. | `string`            | `''`    |
+| `data`        | --             | Actual data of the form.       | `KupInputPanelData` | `null`  |
+
+
+## Dependencies
+
+### Depends on
+
+- [kup-card](../kup-card)
+- [kup-dialog](../kup-dialog)
+
+### Graph
+```mermaid
+graph TD;
+  kup-input-panel --> kup-card
+  kup-input-panel --> kup-dialog
+  kup-card --> kup-autocomplete
+  kup-card --> kup-chip
+  kup-card --> kup-text-field
+  kup-card --> kup-color-picker
+  kup-card --> kup-combobox
+  kup-card --> kup-date-picker
+  kup-card --> kup-rating
+  kup-card --> kup-time-picker
+  kup-card --> kup-image
+  kup-card --> kup-button-list
+  kup-card --> kup-chart
+  kup-card --> kup-gauge
+  kup-card --> kup-progress-bar
+  kup-card --> kup-badge
+  kup-card --> kup-button
+  kup-card --> kup-list
+  kup-card --> kup-spinner
+  kup-card --> kup-checkbox
+  kup-card --> kup-data-table
+  kup-card --> kup-tab-bar
+  kup-card --> kup-tree
+  kup-card --> kup-switch
+  kup-card --> kup-dropdown-button
+  kup-card --> kup-card
+  kup-card --> kup-dialog
+  kup-autocomplete --> kup-list
+  kup-autocomplete --> kup-card
+  kup-autocomplete --> kup-dialog
+  kup-list --> kup-list
+  kup-list --> kup-radio
+  kup-list --> kup-card
+  kup-list --> kup-dialog
+  kup-list --> kup-badge
+  kup-radio --> kup-card
+  kup-radio --> kup-dialog
+  kup-dialog --> kup-badge
+  kup-dialog --> kup-card
+  kup-dialog --> kup-dialog
+  kup-badge --> kup-badge
+  kup-badge --> kup-card
+  kup-badge --> kup-dialog
+  kup-chip --> kup-card
+  kup-chip --> kup-dialog
+  kup-chip --> kup-badge
+  kup-text-field --> kup-card
+  kup-text-field --> kup-dialog
+  kup-color-picker --> kup-card
+  kup-color-picker --> kup-dialog
+  kup-combobox --> kup-list
+  kup-combobox --> kup-card
+  kup-combobox --> kup-dialog
+  kup-date-picker --> kup-card
+  kup-date-picker --> kup-dialog
+  kup-rating --> kup-card
+  kup-rating --> kup-dialog
+  kup-time-picker --> kup-card
+  kup-time-picker --> kup-list
+  kup-time-picker --> kup-dialog
+  kup-image --> kup-spinner
+  kup-image --> kup-card
+  kup-image --> kup-dialog
+  kup-image --> kup-badge
+  kup-spinner --> kup-card
+  kup-spinner --> kup-dialog
+  kup-button-list --> kup-dropdown-button
+  kup-button-list --> kup-card
+  kup-button-list --> kup-dialog
+  kup-button-list --> kup-badge
+  kup-dropdown-button --> kup-list
+  kup-dropdown-button --> kup-card
+  kup-dropdown-button --> kup-dialog
+  kup-dropdown-button --> kup-badge
+  kup-chart --> kup-card
+  kup-chart --> kup-dialog
+  kup-gauge --> kup-card
+  kup-gauge --> kup-dialog
+  kup-progress-bar --> kup-card
+  kup-progress-bar --> kup-dialog
+  kup-button --> kup-card
+  kup-button --> kup-dialog
+  kup-button --> kup-badge
+  kup-checkbox --> kup-card
+  kup-checkbox --> kup-dialog
+  kup-data-table --> kup-card
+  kup-data-table --> kup-list
+  kup-data-table --> kup-switch
+  kup-data-table --> kup-button
+  kup-data-table --> kup-spinner
+  kup-data-table --> kup-form
+  kup-data-table --> kup-image
+  kup-data-table --> kup-dialog
+  kup-data-table --> kup-checkbox
+  kup-data-table --> kup-combobox
+  kup-data-table --> kup-badge
+  kup-data-table --> kup-autocomplete
+  kup-data-table --> kup-chip
+  kup-data-table --> kup-text-field
+  kup-data-table --> kup-color-picker
+  kup-data-table --> kup-date-picker
+  kup-data-table --> kup-rating
+  kup-data-table --> kup-time-picker
+  kup-data-table --> kup-button-list
+  kup-data-table --> kup-chart
+  kup-data-table --> kup-gauge
+  kup-data-table --> kup-progress-bar
+  kup-switch --> kup-card
+  kup-switch --> kup-dialog
+  kup-form --> kup-card
+  kup-form --> kup-dialog
+  kup-form --> kup-autocomplete
+  kup-form --> kup-chip
+  kup-form --> kup-text-field
+  kup-form --> kup-color-picker
+  kup-form --> kup-combobox
+  kup-form --> kup-date-picker
+  kup-form --> kup-rating
+  kup-form --> kup-time-picker
+  kup-form --> kup-image
+  kup-form --> kup-button-list
+  kup-form --> kup-chart
+  kup-form --> kup-gauge
+  kup-form --> kup-progress-bar
+  kup-form --> kup-badge
+  kup-tab-bar --> kup-card
+  kup-tab-bar --> kup-dialog
+  kup-tab-bar --> kup-badge
+  kup-tree --> kup-card
+  kup-tree --> kup-list
+  kup-tree --> kup-text-field
+  kup-tree --> kup-dialog
+  kup-tree --> kup-autocomplete
+  kup-tree --> kup-chip
+  kup-tree --> kup-color-picker
+  kup-tree --> kup-combobox
+  kup-tree --> kup-date-picker
+  kup-tree --> kup-rating
+  kup-tree --> kup-time-picker
+  kup-tree --> kup-image
+  kup-tree --> kup-button-list
+  kup-tree --> kup-chart
+  kup-tree --> kup-gauge
+  kup-tree --> kup-progress-bar
+  kup-tree --> kup-badge
+  style kup-input-panel fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/ketchup/src/input-panel.html b/packages/ketchup/src/input-panel.html
new file mode 100644
index 0000000000..de83bc92cc
--- /dev/null
+++ b/packages/ketchup/src/input-panel.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Input Panel</title>
+
+        <script type="module" src="/build/ketchup.esm.js"></script>
+        <script nomodule src="/build/ketchup.js"></script>
+
+        <style>
+            html {
+                background-color: var(--kup-background-color);
+                color: var(--kup-text-color);
+                font-family: var(--kup-font-family);
+                font-size: var(--kup-font-size);
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>Input Panel</h1>
+        <kup-input-panel id="input-panel"></kup-input-panel>
+
+        <script type="text/javascript" src="/assets/input-panel.js"></script>
+    </body>
+</html>
diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts b/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts
index dd9c3b1669..949cb644f1 100644
--- a/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts
+++ b/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts
@@ -30,6 +30,7 @@ export const fCellUsers = [
     KupTagNames.CELL,
     KupTagNames.DATA_TABLE,
     KupTagNames.FORM,
+    KupTagNames.INPUT_PANEL,
     KupTagNames.TREE,
 ];
 /**
@@ -42,6 +43,7 @@ export const fCheckboxUsers = [
     KupTagNames.DASHBOARD,
     KupTagNames.DATA_TABLE,
     KupTagNames.FORM,
+    KupTagNames.INPUT_PANEL,
     KupTagNames.LIST,
     KupTagNames.TREE,
 ];
@@ -147,6 +149,7 @@ export const fTextFieldUsers = [
     KupTagNames.DATA_TABLE,
     KupTagNames.DATE_PICKER,
     KupTagNames.FORM,
+    KupTagNames.INPUT_PANEL,
     KupTagNames.NUMERIC_PICKER,
     KupTagNames.PLANNER,
     KupTagNames.TEXT_FIELD,
diff --git a/packages/ketchup/src/types/GenericTypes.ts b/packages/ketchup/src/types/GenericTypes.ts
index ce34fa73d3..3ba9ae5ace 100644
--- a/packages/ketchup/src/types/GenericTypes.ts
+++ b/packages/ketchup/src/types/GenericTypes.ts
@@ -87,6 +87,7 @@ export enum KupTagNames {
     IFRAME = 'KUP-IFRAME',
     IMAGE = 'KUP-IMAGE',
     IMAGE_LIST = 'KUP-IMAGE-LIST',
+    INPUT_PANEL = 'KUP-INPUT-PANEL',
     LAZY = 'KUP-LAZY',
     LIST = 'KUP-LIST',
     MAGIC_BOX = 'KUP-MAGIC-BOX',
diff --git a/packages/ketchup/stencil.config.ts b/packages/ketchup/stencil.config.ts
index 4b7d7fc2c5..4ccd007146 100644
--- a/packages/ketchup/stencil.config.ts
+++ b/packages/ketchup/stencil.config.ts
@@ -80,6 +80,7 @@ export const config: Config = {
                 { src: 'grid.html' },
                 { src: 'image.html' },
                 { src: 'image-list.html' },
+                { src: 'input-panel.html' },
                 { src: 'kupdata.html' },
                 { src: 'kupinteract.html' },
                 { src: 'kuptooltip.html' },