diff --git a/src/assets/svgs/arrows/field-arrow-down.svg b/src/assets/svgs/arrows/field-arrow-down.svg
new file mode 100644
index 0000000..2d8883b
--- /dev/null
+++ b/src/assets/svgs/arrows/field-arrow-down.svg
@@ -0,0 +1,25 @@
+<svg
+  viewBox="0 0 512 512"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  fill="#000000"
+  transform="matrix(1, 0, 0, -1, 0, 0)"
+><g id="SVGRepo_bgCarrier" stroke-width="0" /><g
+    id="SVGRepo_tracerCarrier"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  /><g id="SVGRepo_iconCarrier"> <title>triangle-filled</title> <g
+      id="Page-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    > <g
+        id="drop"
+        fill="#000000"
+        transform="translate(32.000000, 42.666667)"
+      > <path
+          d="M246.312928,5.62892705 C252.927596,9.40873724 258.409564,14.8907053 262.189374,21.5053731 L444.667042,340.84129 C456.358134,361.300701 449.250007,387.363834 428.790595,399.054926 C422.34376,402.738832 415.04715,404.676552 407.622001,404.676552 L42.6666667,404.676552 C19.1025173,404.676552 7.10542736e-15,385.574034 7.10542736e-15,362.009885 C7.10542736e-15,354.584736 1.93772021,347.288125 5.62162594,340.84129 L188.099293,21.5053731 C199.790385,1.04596203 225.853517,-6.06216498 246.312928,5.62892705 Z"
+          id="Combined-Shape"
+        > </path> </g> </g> </g></svg>
diff --git a/src/assets/svgs/arrows/field-arrow-up.svg b/src/assets/svgs/arrows/field-arrow-up.svg
new file mode 100644
index 0000000..057046f
--- /dev/null
+++ b/src/assets/svgs/arrows/field-arrow-up.svg
@@ -0,0 +1,24 @@
+<svg
+  viewBox="0 0 512 512"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  fill="#000000"
+><g id="SVGRepo_bgCarrier" stroke-width="0" /><g
+    id="SVGRepo_tracerCarrier"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  /><g id="SVGRepo_iconCarrier"> <title>triangle-filled</title> <g
+      id="Page-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    > <g
+        id="drop"
+        fill="#000000"
+        transform="translate(32.000000, 42.666667)"
+      > <path
+          d="M246.312928,5.62892705 C252.927596,9.40873724 258.409564,14.8907053 262.189374,21.5053731 L444.667042,340.84129 C456.358134,361.300701 449.250007,387.363834 428.790595,399.054926 C422.34376,402.738832 415.04715,404.676552 407.622001,404.676552 L42.6666667,404.676552 C19.1025173,404.676552 7.10542736e-15,385.574034 7.10542736e-15,362.009885 C7.10542736e-15,354.584736 1.93772021,347.288125 5.62162594,340.84129 L188.099293,21.5053731 C199.790385,1.04596203 225.853517,-6.06216498 246.312928,5.62892705 Z"
+          id="Combined-Shape"
+        > </path> </g> </g> </g></svg>
diff --git a/src/examples/form.tsx b/src/examples/form.tsx
index 1a56623..d2493ac 100644
--- a/src/examples/form.tsx
+++ b/src/examples/form.tsx
@@ -5,6 +5,7 @@ import Searchbar from "../lib/form/searchbar";
 import Textarea from "../lib/form/textarea";
 import Slider from "../lib/form/slider";
 import Datepicker from "../lib/form/datepicker";
+import Telegram from "../assets/svgs/telegram.svg";
 
 const Form = () => {
   const [value, setValue] = useState(1);
@@ -26,6 +27,8 @@ const Form = () => {
         variant="success"
         message="success msg"
       />
+      <Field placeholder={"Number"} type="number" Icon={Telegram} />
+      <Field placeholder={"Number"} type="number" />
       <Searchbar />
       <Textarea
         placeholder={"eg. longer text"}
diff --git a/src/lib/form/field.tsx b/src/lib/form/field.tsx
index 41cf2b9..2fe49c4 100644
--- a/src/lib/form/field.tsx
+++ b/src/lib/form/field.tsx
@@ -1,10 +1,14 @@
-import React, { InputHTMLAttributes } from "react";
+import React, { InputHTMLAttributes, useRef } from "react";
 import styled, { css } from "styled-components";
 import SuccessIcon from "../../assets/svgs/status-icons/success.svg";
 import WarningIcon from "../../assets/svgs/status-icons/warning.svg";
 import ErrorIcon from "../../assets/svgs/status-icons/error.svg";
 import InfoIcon from "../../assets/svgs/status-icons/info.svg";
+import UpArrowIcon from "../../assets/svgs/arrows/field-arrow-up.svg";
+import DownArrowIcon from "../../assets/svgs/arrows/field-arrow-down.svg";
+
 import { borderBox, small, svg } from "../../styles/common-style";
+import { useHover } from "usehooks-ts";
 
 export type VariantProp = {
   variant?: "success" | "warning" | "error" | string;
@@ -80,14 +84,70 @@ const StyledInput = styled.input<{
   padding-top: 14px;
   padding-bottom: 14px;
   padding-left: 16px;
-  padding-right: ${({ Icon, variant }) => {
-    if (Icon) return "56px";
-    if (variant) return "44px";
-    return "16px";
+  padding-right: ${({ Icon, variant, type }) => {
+    if (Icon) return type === "number" ? "64px" : "56px";
+    if (variant) return type === "number" ? "52px" : "44px";
+    return type === "number" ? "30px" : "16px";
   }};
+
+  /* Chrome, Safari, Edge, Opera */
+  ::-webkit-outer-spin-button,
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  -moz-appearance: textfield;
+  appearance: textfield;
   ${baseInputStyle}
 `;
 
+const ArrowsContainer = styled.div<{
+  variant?: string;
+  Icon?: React.FC<React.SVGAttributes<SVGElement>>;
+}>`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  height: 100%;
+  width: 14px;
+  gap: 4px;
+  top: 0;
+  right: ${({ Icon, variant }) => {
+    if (Icon) return "48px";
+    if (variant) return "36px";
+    return "12px";
+  }};
+`;
+
+const ArrowButton = styled.button`
+  height: 14px;
+  width: 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-radius: 3px;
+  padding: 0;
+
+  cursor: pointer;
+  :hover {
+    background: ${(props) => props.theme.klerosUIComponentsStroke};
+  }
+`;
+
+const StyledArrowIcon = styled.svg`
+  width: 8px;
+  height: 8px;
+  path {
+    fill: ${(props) => props.theme.klerosUIComponentsSecondaryText};
+  }
+`;
+
 const StyledSVG = styled.svg``;
 
 export const StyledMessage = styled.small<VariantProp>`
@@ -141,27 +201,49 @@ const Field: React.FC<FieldProps> = ({
   Icon,
   className,
   ...props
-}) => (
-  <Wrapper {...{ className }}>
-    <StyledInput {...{ variant, Icon, ...props }} />
-    {variant === "success" && <StyledSuccessIcon className="field-svg" />}
-    {variant === "warning" && <StyledWarningIcon className="field-svg" />}
-    {variant === "error" && <StyledErrorIcon className="field-svg" />}
-    {Icon && (
-      <IconContainer>
-        <StyledIconSVG as={Icon} />
-      </IconContainer>
-    )}
-    {message && (
-      <StyledMessage {...{ variant }}>
-        {variant === "info" && (
-          <InfoIcon className={StyledSVG.styledComponentId} />
-        )}
-        <StyledSmall {...{ variant }}>{message}</StyledSmall>
-      </StyledMessage>
-    )}
-  </Wrapper>
-);
+}) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const hovering = useHover(wrapperRef);
+
+  return (
+    <Wrapper ref={wrapperRef} {...{ className }}>
+      <StyledInput ref={inputRef} {...{ variant, Icon, ...props }} />
+      {props.type === "number" && hovering && (
+        <ArrowsContainer className="field-arrows" {...{ variant, Icon }}>
+          <ArrowButton
+            aria-label="increment"
+            onClick={() => inputRef?.current?.stepUp()}
+          >
+            <StyledArrowIcon as={UpArrowIcon} />
+          </ArrowButton>
+          <ArrowButton
+            aria-label="decrement"
+            onClick={() => inputRef?.current?.stepDown()}
+          >
+            <StyledArrowIcon as={DownArrowIcon} />
+          </ArrowButton>
+        </ArrowsContainer>
+      )}
+      {variant === "success" && <StyledSuccessIcon className="field-svg" />}
+      {variant === "warning" && <StyledWarningIcon className="field-svg" />}
+      {variant === "error" && <StyledErrorIcon className="field-svg" />}
+      {Icon && (
+        <IconContainer>
+          <StyledIconSVG as={Icon} />
+        </IconContainer>
+      )}
+      {message && (
+        <StyledMessage {...{ variant }}>
+          {variant === "info" && (
+            <InfoIcon className={StyledSVG.styledComponentId} />
+          )}
+          <StyledSmall {...{ variant }}>{message}</StyledSmall>
+        </StyledMessage>
+      )}
+    </Wrapper>
+  );
+};
 
 Field.displayName = "Field";