diff --git a/next-docs/pages/components/input.tsx b/next-docs/pages/components/input.tsx
index 35527ecd09..2234263080 100644
--- a/next-docs/pages/components/input.tsx
+++ b/next-docs/pages/components/input.tsx
@@ -4,6 +4,7 @@ import type { ComponentNames } from '../../components/getComponent';
 import Layout from '../../components/Layout';
 import PropsTable from '../../components/PropsTable';
 import Bg from '../../public/examples/input/Bg';
+import Controled from '../../public/examples/input/Controled';
 import Default from '../../public/examples/input/Default';
 import Sizes from '../../public/examples/input/Sizes';
 import States from '../../public/examples/input/States';
@@ -54,6 +55,11 @@ const PageInput = () => {
         preview={<Types />}
         code={examples ? examples.Types : 'Loading'}
       />
+      <Preview
+        title="Controlling an input with a state variable"
+        preview={<Controled />}
+        code={examples ? examples.Controled : 'Loading'}
+      />
       <PropsTable
         title="Input props"
         data={[
diff --git a/next-docs/public/examples/input/Controled.tsx b/next-docs/public/examples/input/Controled.tsx
new file mode 100644
index 0000000000..e17e00c9fa
--- /dev/null
+++ b/next-docs/public/examples/input/Controled.tsx
@@ -0,0 +1,22 @@
+import { Input } from '@heathmont/moon-core-tw';
+import { useState } from 'react';
+
+const Example = () => {
+  const [color, setColor] = useState('FFFFFF');
+  return (
+    <div className="w-full">
+      <Input
+        aria-label="controled"
+        value={color}
+        onChange={(e) => {
+          setColor(e.target.value);
+        }}
+      />
+      <p className="text-moon-18 pt-2">
+        <b>Result:</b> {color}
+      </p>
+    </div>
+  );
+};
+
+export default Example;
diff --git a/next-docs/public/examples/input/CustomDate.tsx b/next-docs/public/examples/input/CustomDate.tsx
new file mode 100644
index 0000000000..d18b21062e
--- /dev/null
+++ b/next-docs/public/examples/input/CustomDate.tsx
@@ -0,0 +1,56 @@
+//This exemple should be discussed about separate date-picker component
+import { Input, Label } from '@heathmont/moon-core-tw';
+import { TimeCalendarDate } from '@heathmont/moon-icons-tw';
+
+const Example = () => (
+  <>
+    <div className="flex flex-col lg:flex-row justify-around items-end w-full gap-2">
+      <div className="w-full">
+        <Label>Date with placeholder</Label>
+        <div className="relative">
+          <Input
+            type="text"
+            aria-label="Date"
+            placeholder="mm.dd.yyyy"
+            className="[&[type='date']::-webkit-calendar-picker-indicator]:bg-none cursor-default [&_.datetime-calendar-button-svg]:hidden"
+            onFocus={(e) => {
+              e.target.type = 'date';
+              e.target?.showPicker();
+            }}
+            onBlur={(e) => (e.target.type = 'text')}
+          />
+          <span className="pointer-events-none absolute top-1/2 right-3 h-6 -mt-3 w-10 bg-goku z-5">
+            <TimeCalendarDate className="text-bulma text-moon-24 absolute top-1/2 right-0 -mt-3" />
+          </span>
+        </div>
+      </div>
+      <div className="w-full">
+        <Label htmlFor="time-type">Time</Label>
+        <div className="relative">
+          <Input
+            type="text"
+            id="time-type"
+            placeholder="Time"
+            className="[&[type='date']::-webkit-calendar-picker-indicator]:bg-none cursor-default"
+            onFocus={(e) => {
+              e.target.type = 'time';
+              e.target?.showPicker();
+            }}
+            onBlur={(e) => (e.target.type = 'text')}
+          />
+          <TimeCalendarDate className="text-bulma text-moon-24 absolute top-1/2 right-3 z-5 -mt-3" />
+        </div>
+      </div>
+      <div className="w-full">
+        <Label htmlFor="datetimelocal-type">Datetime local</Label>
+        <Input
+          type="datetime-local"
+          id="datetimelocal-type"
+          className="[&[type='date']::-webkit-calendar-picker-indicator]:bg-none cursor-default [&_#calendar-button]:hidden"
+        />
+      </div>
+    </div>
+  </>
+);
+
+export default Example;
diff --git a/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap
index ea0f0a3c02..84cc62364d 100644
--- a/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/input/__tests__/__snapshots__/index.test.tsx.snap
@@ -123,6 +123,113 @@ Object {
 }
 `;
 
+exports[`Input in RTL renders Controled 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        dir="rtl"
+      >
+        <div
+          class="w-full"
+        >
+          <input
+            aria-label="controled"
+            class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
+            value="FFFFFF"
+          />
+          <p
+            class="text-moon-18 pt-2"
+          >
+            <b>
+              Result:
+            </b>
+             
+            FFFFFF
+          </p>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      dir="rtl"
+    >
+      <div
+        class="w-full"
+      >
+        <input
+          aria-label="controled"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
+          value="FFFFFF"
+        />
+        <p
+          class="text-moon-18 pt-2"
+        >
+          <b>
+            Result:
+          </b>
+           
+          FFFFFF
+        </p>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
 exports[`Input in RTL renders Default 1`] = `
 Object {
   "asFragment": [Function],
@@ -1064,6 +1171,105 @@ Object {
 }
 `;
 
+exports[`Input renders Controled 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="w-full"
+      >
+        <input
+          aria-label="controled"
+          class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
+          value="FFFFFF"
+        />
+        <p
+          class="text-moon-18 pt-2"
+        >
+          <b>
+            Result:
+          </b>
+           
+          FFFFFF
+        </p>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="w-full"
+    >
+      <input
+        aria-label="controled"
+        class="block w-full max-w-full py-0 px-4 m-0 appearance-none text-moon-16 text-bulma transition-shadow box-border relative z-[2] bg-goku shadow-input hover:shadow-input-hov focus:shadow-input-focus focus:outline-none focus-visible::shadow-input-focus focus-visible::outline-none before:box-border after:box-border placeholder:delay-75 placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input read-only:focus-visible:shadow-input invalid:focus-visible:shadow-input-err invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err h-10 leading-10 rounded-moon-i-sm input-dt-shared"
+        value="FFFFFF"
+      />
+      <p
+        class="text-moon-18 pt-2"
+      >
+        <b>
+          Result:
+        </b>
+         
+        FFFFFF
+      </p>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
 exports[`Input renders Default 1`] = `
 Object {
   "asFragment": [Function],
diff --git a/next-docs/public/examples/input/__tests__/index.test.tsx b/next-docs/public/examples/input/__tests__/index.test.tsx
index 0c22827837..35913cd9e7 100644
--- a/next-docs/public/examples/input/__tests__/index.test.tsx
+++ b/next-docs/public/examples/input/__tests__/index.test.tsx
@@ -8,6 +8,7 @@ import Default from '../Default';
 import Sizes from '../Sizes';
 import Types from '../Types';
 import States from '../States';
+import Controled from '../Controled';
 
 const withRtl = (component: JSX.Element) => <div dir="rtl">{component}</div>;
 
@@ -33,6 +34,10 @@ describe('Input', () => {
     const tree = render(<Types />);
     expect(tree).toMatchSnapshot();
   });
+  it('renders Controled', () => {
+    const tree = render(<Controled />);
+    expect(tree).toMatchSnapshot();
+  });
 });
 
 describe('Input in RTL', () => {
@@ -57,4 +62,8 @@ describe('Input in RTL', () => {
     const tree = render(withRtl(<Types />));
     expect(tree).toMatchSnapshot();
   });
+  it('renders Controled', () => {
+    const tree = render(withRtl(<Controled />));
+    expect(tree).toMatchSnapshot();
+  });
 });