diff --git a/src/components/molecules/CounterField/CounterField.scss b/src/components/molecules/CounterField/CounterField.scss
new file mode 100644
index 00000000..a9d3e016
--- /dev/null
+++ b/src/components/molecules/CounterField/CounterField.scss
@@ -0,0 +1,27 @@
+.counterField {
+    $this: &;
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--guit-ref-spacing-3xsmall);
+
+    &__inputContainer {
+        display: flex;
+        gap: var(--guit-ref-spacing-xsmall);
+        width: 100%;
+    }
+
+    &__input {
+        width: 8rem;
+    }
+
+    &__infoContainer {
+        display: flex;
+        width: 100%;
+    }
+
+    &_readOnly {
+        pointer-events: none;
+    }
+}
diff --git a/src/components/molecules/CounterField/CounterField.stories.tsx b/src/components/molecules/CounterField/CounterField.stories.tsx
new file mode 100644
index 00000000..ce822d27
--- /dev/null
+++ b/src/components/molecules/CounterField/CounterField.stories.tsx
@@ -0,0 +1,79 @@
+import React, { ChangeEvent, FC, MouseEvent, useState } from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+// Components
+import CounterField, { ICounterFieldProps } from "@components/molecules/CounterField/CounterField";
+
+// Helpers
+import { args, propCategory } from "../../../../stories/assets/storybook.globals";
+
+const meta: Meta<ICounterFieldProps> = {
+    title: "Molecules/CounterField",
+    component: CounterField,
+    argTypes: {
+        value: args({ control: "text", ...propCategory.states }),
+        defaultValue: args({ control: "number", ...propCategory.states }),
+        disabled: args({ control: "boolean", ...propCategory.states }),
+        readOnly: args({ control: "boolean", ...propCategory.states }),
+        ariaLabelIncrement: args({ control: "text", ...propCategory.others }),
+        ariaLabelDecrement: args({ control: "text", ...propCategory.others }),
+        step: args({ control: "number", defaultValue: 1, ...propCategory.validation }),
+        min: args({ control: "number", ...propCategory.validation }),
+        max: args({ control: "number", ...propCategory.validation }),
+        size: args({ control: "select", ...propCategory.appearance }),
+        status: args({ control: "select", ...propCategory.appearance }),
+        className: args({ control: "false", ...propCategory.appearance }),
+        label: args({ control: "text", ...propCategory.content }),
+        infoText: args({ control: "text", ...propCategory.content }),
+        helperText: args({ control: "text", ...propCategory.content }),
+        required: args({ control: "boolean", ...propCategory.states }),
+        onChange: args({ control: "false", ...propCategory.action }),
+        onInputBlur: args({ control: "false", ...propCategory.action }),
+        onInputFocus: args({ control: "false", ...propCategory.action })
+    },
+
+    args: {
+        defaultValue: 0,
+        step: 1,
+        size: "medium",
+        status: "rest",
+        label: "Label",
+        helperText: "Helper text",
+        required: true
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<ICounterFieldProps>;
+
+const Template: FC<ICounterFieldProps> = ({ ...props }) => <CounterField {...props} />;
+
+export const Default: Story = {
+    render: ({ ...props }) => <Template {...props} />,
+    argTypes: { value: args({ control: "false", ...propCategory.states }) }
+};
+
+const ControlledTemplate: FC<ICounterFieldProps> = ({ value, onChange, ...props }) => {
+    const isControlled = value !== undefined;
+    const displayValue = isControlled ? value : "0";
+    const [internalStringValue, setInternalStringValue] = useState(displayValue);
+
+    const handleChange = (
+        newValueString: string,
+        event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>
+    ) => {
+        setInternalStringValue(newValueString);
+        onChange?.(newValueString, event);
+    };
+
+    return <CounterField {...props} value={internalStringValue} onChange={handleChange} />;
+};
+
+export const Controlled: Story = {
+    render: (props) => <ControlledTemplate {...props} />,
+    args: {
+        helperText: "Controlled Counter"
+    },
+    argTypes: { defaultValue: args({ control: "false", ...propCategory.states }) }
+};
diff --git a/src/components/molecules/CounterField/CounterField.test.tsx b/src/components/molecules/CounterField/CounterField.test.tsx
new file mode 100644
index 00000000..b61c7a7d
--- /dev/null
+++ b/src/components/molecules/CounterField/CounterField.test.tsx
@@ -0,0 +1,598 @@
+import React from "react";
+import { mount, ReactWrapper } from "enzyme";
+
+import { Minus, Plus } from "@geneui/icons";
+
+// Components
+import Button from "@components/atoms/Button";
+import HelperText from "@components/atoms/HelperText";
+import Label from "@components/atoms/Label";
+import CounterField, { ICounterFieldProps } from "@components/molecules/CounterField/CounterField";
+import TextField from "@components/molecules/TextField";
+
+describe("CounterField", () => {
+    let setup: ReactWrapper<ICounterFieldProps>;
+    beforeEach(() => {
+        setup = mount(<CounterField />);
+    });
+
+    it("renders without crashing", () => {
+        expect(setup.exists()).toBeTruthy();
+    });
+
+    it("renders className prop correctly", () => {
+        const className = "test-class";
+        const wrapper = setup.setProps({ className });
+
+        expect(wrapper.hasClass(className)).toBeTruthy();
+    });
+
+    it("renders label prop correctly", () => {
+        const label = "Counter Label";
+        const wrapper = setup.setProps({ label });
+
+        expect(wrapper.find(Label).exists()).toBeTruthy();
+        expect(wrapper.find(Label).first().props().text).toBe(label);
+    });
+
+    it("renders infoText prop correctly", () => {
+        const infoText = "Additional info";
+        const wrapper = setup.setProps({ label: "Label", infoText });
+
+        expect(wrapper.find(Label).first().props().infoText).toBe(infoText);
+    });
+
+    it("renders required prop correctly", () => {
+        const wrapper = setup.setProps({ label: "Label", required: true });
+
+        expect(wrapper.find(Label).first().props().required).toBeTruthy();
+    });
+
+    it("renders helperText prop correctly", () => {
+        const helperText = "Helper text";
+        const wrapper = setup.setProps({ helperText });
+
+        expect(wrapper.find(HelperText).exists()).toBeTruthy();
+        expect(wrapper.find(HelperText).props().text).toBe(helperText);
+    });
+
+    it.each<ICounterFieldProps["size"]>(["small", "medium", "large"])('should have "%s" size', (size) => {
+        const wrapper = setup.setProps({ size });
+
+        expect(wrapper.find(Button).first().props().size).toBe(size);
+        expect(wrapper.find(TextField).props().size).toBe(size);
+    });
+
+    it.each<ICounterFieldProps["status"]>(["rest", "warning", "error"])('should have "%s" status', (status) => {
+        const wrapper = setup.setProps({ status, helperText: "test" });
+
+        expect(wrapper.find(".counterField").hasClass(`counterField_status_${status}`)).toBeTruthy();
+        expect(wrapper.find(TextField).props().status).toBe(status);
+        expect(wrapper.find(HelperText).props().status).toBe(status);
+    });
+
+    it("renders disabled prop correctly", () => {
+        const wrapper = setup.setProps({ disabled: true });
+
+        expect(wrapper.find(".counterField").hasClass("counterField_disabled")).toBeTruthy();
+        expect(wrapper.find(Button).at(0).props().disabled).toBeTruthy();
+        expect(wrapper.find(Button).at(1).props().disabled).toBeTruthy();
+        expect(wrapper.find(TextField).props().disabled).toBeTruthy();
+    });
+
+    it("renders disabled prop on Label correctly", () => {
+        const wrapper = setup.setProps({ label: "Label", disabled: true });
+
+        expect(wrapper.find(Label).first().props().disabled).toBeTruthy();
+    });
+
+    it("renders disabled prop on HelperText correctly", () => {
+        const wrapper = setup.setProps({ helperText: "test", disabled: true });
+
+        expect(wrapper.find(HelperText).props().disabled).toBeTruthy();
+    });
+
+    it("renders readOnly prop correctly", () => {
+        const wrapper = setup.setProps({ readOnly: true });
+        expect(wrapper.find(".counterField").hasClass("counterField_readOnly")).toBeTruthy();
+    });
+
+    it("does not apply readOnly class when disabled is true", () => {
+        const wrapper = setup.setProps({ readOnly: true, disabled: true });
+        expect(wrapper.find(".counterField").hasClass("counterField_readOnly")).toBeFalsy();
+        expect(wrapper.find(".counterField").hasClass("counterField_disabled")).toBeTruthy();
+    });
+
+    it("passes readOnly prop to TextField correctly", () => {
+        const wrapper = setup.setProps({ readOnly: true });
+        expect(wrapper.find(TextField).props().readOnly).toBeTruthy();
+    });
+
+    it("passes readOnly prop to Label correctly", () => {
+        const wrapper = setup.setProps({ label: "Label", readOnly: true });
+        expect(wrapper.find(Label).first().props().readOnly).toBeTruthy();
+    });
+
+    it("disables increment button when readOnly is true", () => {
+        const wrapper = setup.setProps({ readOnly: true });
+        const incrementButton = wrapper.find(Button).at(1);
+        expect(incrementButton.props().disabled).toBeTruthy();
+    });
+
+    it("disables decrement button when readOnly is true", () => {
+        const wrapper = setup.setProps({ readOnly: true });
+        const decrementButton = wrapper.find(Button).at(0);
+        expect(decrementButton.props().disabled).toBeTruthy();
+    });
+
+    it("has tabIndex -1 on container when readOnly is true", () => {
+        const wrapper = setup.setProps({ readOnly: true });
+        expect(wrapper.find(".counterField").prop("tabIndex")).toBe(-1);
+    });
+
+    it("does not call onChange when increment button is clicked in readOnly mode", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: 5, readOnly: true, onChange });
+
+        const incrementButton = wrapper.find(Button).at(1);
+        incrementButton.simulate("click");
+
+        expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it("does not call onChange when decrement button is clicked in readOnly mode", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: 5, readOnly: true, onChange });
+
+        const decrementButton = wrapper.find(Button).at(0);
+        decrementButton.simulate("click");
+
+        expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it("renders value prop correctly in controlled mode", () => {
+        const value = 10;
+        const wrapper = setup.setProps({ value });
+
+        expect(wrapper.find(TextField).props().value).toBe(String(value));
+    });
+
+    it("updates value correctly in controlled mode", () => {
+        const wrapper = setup.setProps({ value: 5 });
+        expect(wrapper.find(TextField).props().value).toBe("5");
+
+        wrapper.setProps({ value: 10 });
+        expect(wrapper.find(TextField).props().value).toBe("10");
+    });
+
+    it("respects defaultValue in uncontrolled mode", () => {
+        const wrapper = mount(<CounterField defaultValue={7} />);
+
+        expect(wrapper.find(TextField).props().value).toBe("7");
+    });
+
+    it("defaults to 0 when no defaultValue is provided in uncontrolled mode", () => {
+        expect(setup.find(TextField).props().value).toBe("0");
+    });
+
+    it("increments by default step of 1", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: 5, onChange });
+
+        const incrementButton = wrapper.find(Button).at(1);
+        incrementButton.simulate("click");
+
+        expect(onChange).toHaveBeenCalledWith("6", expect.any(Object));
+    });
+
+    it("decrements by default step of 1", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: 5, onChange });
+
+        const decrementButton = wrapper.find(Button).at(0);
+        decrementButton.simulate("click");
+
+        expect(onChange).toHaveBeenCalledWith("4", expect.any(Object));
+    });
+
+    it("increments by custom step", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: 5, step: 3, onChange });
+
+        const incrementButton = wrapper.find(Button).at(1);
+        incrementButton.simulate("click");
+
+        expect(onChange).toHaveBeenCalledWith("8", expect.any(Object));
+    });
+
+    it("decrements by custom step", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: 10, step: 3, onChange });
+
+        const decrementButton = wrapper.find(Button).at(0);
+        decrementButton.simulate("click");
+
+        expect(onChange).toHaveBeenCalledWith("7", expect.any(Object));
+    });
+
+    it("renders Plus icon on increment button", () => {
+        const incrementButton = setup.find(Button).at(1);
+        expect(incrementButton.props().Icon).toBe(Plus);
+    });
+
+    it("renders Minus icon on decrement button", () => {
+        const decrementButton = setup.find(Button).at(0);
+        expect(decrementButton.props().Icon).toBe(Minus);
+    });
+
+    it("passes type='number' prop to TextField", () => {
+        expect(setup.find(TextField).props().type).toBe("number");
+    });
+
+    it("increment button is not disabled by default", () => {
+        const incrementButton = setup.find(Button).at(1);
+        expect(incrementButton.props().disabled).toBeFalsy();
+    });
+
+    it("increment button is disabled when component is disabled", () => {
+        const wrapper = setup.setProps({ disabled: true });
+        const incrementButton = wrapper.find(Button).at(1);
+        expect(incrementButton.props().disabled).toBeTruthy();
+    });
+
+    it("decrement button is disabled when disabled prop is true", () => {
+        const wrapper = setup.setProps({ disabled: true });
+        const decrementButton = wrapper.find(Button).at(0);
+        expect(decrementButton.props().disabled).toBeTruthy();
+    });
+
+    it("should have aria-required attribute when required is true", () => {
+        const wrapper = setup.setProps({ required: true });
+        expect(wrapper.find(".counterField").prop("aria-required")).toBe(true);
+    });
+
+    it("should have aria-invalid='true' when status is 'error'", () => {
+        const wrapper = setup.setProps({ status: "error" });
+        expect(wrapper.find(".counterField").prop("aria-invalid")).toBe(true);
+    });
+
+    it("should have aria-invalid='false' when status is not 'error'", () => {
+        const wrapperRest = setup.setProps({ status: "rest" });
+        expect(wrapperRest.find(".counterField").prop("aria-invalid")).toBe(false);
+
+        const wrapperWarning = setup.setProps({ status: "warning" });
+        expect(wrapperWarning.find(".counterField").prop("aria-invalid")).toBe(false);
+    });
+
+    it("should have aria-label on decrement button", () => {
+        const decrementButton = setup.find(Button).at(0);
+        expect(decrementButton.props()["aria-label"]).toBe("Decrement value");
+    });
+
+    it("should have aria-label on increment button", () => {
+        const incrementButton = setup.find(Button).at(1);
+        expect(incrementButton.props()["aria-label"]).toBe("Increment value");
+    });
+
+    it("buttons should have secondary appearance", () => {
+        const decrementButton = setup.find(Button).at(0);
+        const incrementButton = setup.find(Button).at(1);
+
+        expect(decrementButton.props().appearance).toBe("secondary");
+        expect(incrementButton.props().appearance).toBe("secondary");
+    });
+
+    it("buttons should have fill layout", () => {
+        const decrementButton = setup.find(Button).at(0);
+        const incrementButton = setup.find(Button).at(1);
+
+        expect(decrementButton.props().layout).toBe("fill");
+        expect(incrementButton.props().layout).toBe("fill");
+    });
+
+    it("does not update internal state in controlled mode", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: 5, onChange });
+
+        const incrementButton = wrapper.find(Button).at(1);
+        incrementButton.simulate("click");
+
+        expect(wrapper.find(TextField).props().value).toBe("5");
+        expect(onChange).toHaveBeenCalledWith("6", expect.any(Object));
+    });
+
+    it("calls onChange with string value when user types in input", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ onChange });
+
+        const input = wrapper.find(TextField).find("input");
+        input.simulate("change", { target: { value: "12" } });
+
+        expect(onChange).toHaveBeenCalledWith("12", expect.any(Object));
+    });
+
+    it("calls onChange with intermediate string states like '-'", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ onChange });
+
+        const input = wrapper.find(TextField).find("input");
+        input.simulate("change", { target: { value: "-" } });
+
+        expect(onChange).toHaveBeenCalledWith("-", expect.any(Object));
+    });
+
+    it("calls onChange with intermediate string states like '.'", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ onChange });
+
+        const input = wrapper.find(TextField).find("input");
+        input.simulate("change", { target: { value: "." } });
+
+        expect(onChange).toHaveBeenCalledWith(".", expect.any(Object));
+    });
+
+    it("calls onChange with intermediate string states and decimal values", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ onChange });
+
+        const input = wrapper.find(TextField).find("input");
+
+        input.simulate("change", { target: { value: "-5" } });
+        expect(onChange).toHaveBeenCalledWith("-5", expect.any(Object));
+
+        input.simulate("change", { target: { value: "12.5" } });
+        expect(onChange).toHaveBeenCalledWith("12.5", expect.any(Object));
+    });
+
+    it("calls onChange with event object containing correct type", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: 5, onChange });
+
+        const incrementButton = wrapper.find(Button).at(1);
+        incrementButton.simulate("click");
+
+        expect(onChange).toHaveBeenCalledWith("6", expect.objectContaining({ type: "click" }));
+
+        const input = wrapper.find(TextField).find("input");
+        input.simulate("change", { target: { value: "10" } });
+
+        expect(onChange).toHaveBeenCalledWith("10", expect.objectContaining({ type: "change" }));
+    });
+
+    it("handles negative numbers correctly in controlled mode", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: -5, onChange });
+
+        expect(wrapper.find(TextField).props().value).toBe("-5");
+
+        const incrementButton = wrapper.find(Button).at(1);
+        incrementButton.simulate("click");
+
+        expect(onChange).toHaveBeenCalledWith("-4", expect.any(Object));
+    });
+
+    it("handles decimal numbers correctly in controlled mode", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: 5.5, onChange });
+
+        expect(wrapper.find(TextField).props().value).toBe("5.5");
+
+        const incrementButton = wrapper.find(Button).at(1);
+        incrementButton.simulate("click");
+
+        expect(onChange).toHaveBeenCalledWith("6.5", expect.any(Object));
+    });
+
+    it("accepts string value prop in controlled mode", () => {
+        const wrapper = setup.setProps({ value: "10" });
+        expect(wrapper.find(TextField).props().value).toBe("10");
+    });
+
+    it("clamps value to max when incrementing exceeds max", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: 5, max: 10, step: 100, onChange });
+
+        const incrementButton = wrapper.find(Button).at(1);
+        incrementButton.simulate("click");
+
+        expect(onChange).toHaveBeenCalledWith("10", expect.any(Object));
+    });
+
+    it("disables increment button when value equals max", () => {
+        const wrapper = setup.setProps({ value: 10, max: 10 });
+        const incrementButton = wrapper.find(Button).at(1);
+        expect(incrementButton.props().disabled).toBeTruthy();
+    });
+
+    it("disables increment button when value exceeds max", () => {
+        const wrapper = setup.setProps({ value: 15, max: 10 });
+        const incrementButton = wrapper.find(Button).at(1);
+        expect(incrementButton.props().disabled).toBeTruthy();
+    });
+
+    it("enables increment button when value is below max", () => {
+        const wrapper = setup.setProps({ value: 5, max: 10 });
+        const incrementButton = wrapper.find(Button).at(1);
+        expect(incrementButton.props().disabled).toBeFalsy();
+    });
+
+    it("increment button is enabled when max is not provided", () => {
+        const wrapper = setup.setProps({ value: 100 });
+        const incrementButton = wrapper.find(Button).at(1);
+        expect(incrementButton.props().disabled).toBeFalsy();
+    });
+
+    it("decrement button remains enabled when value is at max", () => {
+        const wrapper = setup.setProps({ value: 10, max: 10 });
+        const decrementButton = wrapper.find(Button).at(0);
+        expect(decrementButton.props().disabled).toBeFalsy();
+    });
+
+    it("handles max with decimal step correctly", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: 8, max: 10, step: 2.5, onChange });
+
+        const incrementButton = wrapper.find(Button).at(1);
+        incrementButton.simulate("click");
+
+        expect(onChange).toHaveBeenCalledWith("10", expect.any(Object));
+    });
+
+    it("clamps to max when incrementing from value close to max", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: 9.5, max: 10, step: 1, onChange });
+
+        const incrementButton = wrapper.find(Button).at(1);
+        incrementButton.simulate("click");
+
+        expect(onChange).toHaveBeenCalledWith("10", expect.any(Object));
+    });
+
+    it("clamps value to min when decrementing exceeds min", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: 5, min: 0, step: 100, onChange });
+
+        const decrementButton = wrapper.find(Button).at(0);
+        decrementButton.simulate("click");
+
+        expect(onChange).toHaveBeenCalledWith("0", expect.any(Object));
+    });
+
+    it("disables decrement button when value equals min", () => {
+        const wrapper = setup.setProps({ value: 0, min: 0 });
+        const decrementButton = wrapper.find(Button).at(0);
+        expect(decrementButton.props().disabled).toBeTruthy();
+    });
+
+    it("disables decrement button when value is below min", () => {
+        const wrapper = setup.setProps({ value: -5, min: 0 });
+        const decrementButton = wrapper.find(Button).at(0);
+        expect(decrementButton.props().disabled).toBeTruthy();
+    });
+
+    it("enables decrement button when value is above min", () => {
+        const wrapper = setup.setProps({ value: 5, min: 0 });
+        const decrementButton = wrapper.find(Button).at(0);
+        expect(decrementButton.props().disabled).toBeFalsy();
+    });
+
+    it("decrement button is enabled when min is not provided", () => {
+        const wrapper = setup.setProps({ value: -100 });
+        const decrementButton = wrapper.find(Button).at(0);
+        expect(decrementButton.props().disabled).toBeFalsy();
+    });
+
+    it("increment button remains enabled when value is at min", () => {
+        const wrapper = setup.setProps({ value: 0, min: 0 });
+        const incrementButton = wrapper.find(Button).at(1);
+        expect(incrementButton.props().disabled).toBeFalsy();
+    });
+
+    it("handles min with decimal step correctly", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: 2, min: 0, step: 2.5, onChange });
+
+        const decrementButton = wrapper.find(Button).at(0);
+        decrementButton.simulate("click");
+
+        expect(onChange).toHaveBeenCalledWith("0", expect.any(Object));
+    });
+
+    it("clamps to min when decrementing from value close to min", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: 0.5, min: 0, step: 1, onChange });
+
+        const decrementButton = wrapper.find(Button).at(0);
+        decrementButton.simulate("click");
+
+        expect(onChange).toHaveBeenCalledWith("0", expect.any(Object));
+    });
+
+    it("clamps value to max on blur when user types value above max", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ max: 10, onChange });
+
+        const input = wrapper.find(TextField).find("input");
+        input.simulate("change", { target: { value: "100" } });
+        input.simulate("blur", { target: { value: "100" } });
+
+        expect(onChange).toHaveBeenCalledWith("10", expect.any(Object));
+    });
+
+    it("clamps value to min on blur when user types value below min", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ min: 0, onChange });
+
+        const input = wrapper.find(TextField).find("input");
+        input.simulate("change", { target: { value: "-50" } });
+        input.simulate("blur", { target: { value: "-50" } });
+
+        expect(onChange).toHaveBeenCalledWith("0", expect.any(Object));
+    });
+
+    it("clamps value to both min and max on blur when outside bounds", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ min: 0, max: 10, onChange });
+
+        const input = wrapper.find(TextField).find("input");
+        input.simulate("change", { target: { value: "100" } });
+        input.simulate("blur", { target: { value: "100" } });
+
+        expect(onChange).toHaveBeenCalledWith("10", expect.any(Object));
+    });
+
+    it("does not clamp value on blur when within bounds", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ min: 0, max: 10, onChange });
+
+        const input = wrapper.find(TextField).find("input");
+        input.simulate("change", { target: { value: "5" } });
+        input.simulate("blur", { target: { value: "5" } });
+
+        expect(onChange).toHaveBeenCalledWith("5", expect.any(Object));
+    });
+
+    it("clamps to max on blur in controlled mode", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ value: 5, max: 10, onChange });
+
+        const input = wrapper.find(TextField).find("input");
+        input.simulate("change", { target: { value: "100" } });
+        input.simulate("blur", { target: { value: "100" } });
+
+        expect(onChange).toHaveBeenCalledWith("10", expect.any(Object));
+    });
+
+    it("clamps to min on blur in uncontrolled mode", () => {
+        const onChange = jest.fn();
+        const wrapper = mount(<CounterField min={0} defaultValue={5} onChange={onChange} />);
+
+        const input = wrapper.find(TextField).find("input");
+        input.simulate("change", { target: { value: "-50" } });
+        input.simulate("blur", { target: { value: "-50" } });
+
+        expect(onChange).toHaveBeenCalledWith("0", expect.any(Object));
+        expect(wrapper.find(TextField).props().value).toBe("0");
+    });
+
+    it("allows typing values outside bounds before blur", () => {
+        const onChange = jest.fn();
+        const wrapper = setup.setProps({ max: 10, onChange });
+
+        const input = wrapper.find(TextField).find("input");
+        input.simulate("change", { target: { value: "100" } });
+        expect(onChange).toHaveBeenCalledWith("100", expect.any(Object));
+        input.simulate("blur", { target: { value: "100" } });
+        expect(onChange).toHaveBeenLastCalledWith("10", expect.any(Object));
+    });
+
+    it("calls onInputBlur after clamping on blur", () => {
+        const onInputBlur = jest.fn();
+        const wrapper = setup.setProps({ max: 10, onInputBlur });
+
+        const input = wrapper.find(TextField).find("input");
+        input.simulate("blur", { target: { value: "100" } });
+
+        expect(onInputBlur).toHaveBeenCalled();
+    });
+});
diff --git a/src/components/molecules/CounterField/CounterField.tsx b/src/components/molecules/CounterField/CounterField.tsx
new file mode 100644
index 00000000..31453b89
--- /dev/null
+++ b/src/components/molecules/CounterField/CounterField.tsx
@@ -0,0 +1,284 @@
+import React, { ChangeEvent, FC, FocusEvent, MouseEvent, useMemo, useState } from "react";
+import classNames from "classnames";
+import { nanoid } from "nanoid/non-secure";
+
+import { Minus, Plus } from "@geneui/icons";
+
+// Components
+import Button from "@components/atoms/Button";
+import HelperText from "@components/atoms/HelperText";
+import Label from "@components/atoms/Label";
+import TextField from "@components/molecules/TextField";
+
+// Styles
+import "./CounterField.scss";
+
+interface ICounterFieldProps {
+    /**
+     * Additional class for the parent element.
+     * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
+     */
+    className?: string;
+    /**
+     * The value of the counter (controlled).
+     * This is what will be returned in onChange and stored as the selected value.
+     */
+    value?: number | string;
+    /**
+     * The initial value of the counter (uncontrolled).
+     */
+    defaultValue?: number;
+    /**
+     * Disables the counter field, preventing it from being interacted with.
+     */
+    disabled?: boolean;
+    /**
+     * Displays the counter field as read-only, where users cannot modify its value.
+     */
+    readOnly?: boolean;
+    /**
+     * The amount by which the value increases or decreases.
+     */
+    step?: number;
+    /**
+     * The minimum value allowed for the counter.
+     * The decrement button will be disabled when the value reaches or is below this minimum.
+     */
+    min?: number;
+    /**
+     * The maximum value allowed for the counter.
+     * The increment button will be disabled when the value reaches or exceeds this maximum.
+     */
+    max?: number;
+    /**
+     * Size of the component.<br> Possible values: `small | medium | large`
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * The status/validation state of the component.<br> Possible values: `rest | warning | error`
+     */
+    status?: "rest" | "warning" | "error";
+    /**
+     * The main label for the counter field.
+     */
+    label?: string;
+    /**
+     * Additional descriptive text that appears alongside the `label`, typically displayed as a tooltip.
+     */
+    infoText?: string;
+    /**
+     * Helper text that appears below the counter field.
+     */
+    helperText?: string;
+    /**
+     * Indicates that the field is required.
+     */
+    required?: boolean;
+    /**
+     * The aria label for the increment button.
+     */
+    ariaLabelIncrement?: string;
+    /**
+     * The aria label for the decrement button.
+     */
+    ariaLabelDecrement?: string;
+    /**
+     * Fires when the user changes the counter value (via buttons or input).
+     * Receives the raw input string value - parent can convert to number if needed.
+     */
+    onChange?: (value: string, event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires when the input field loses focus.
+     */
+    onInputBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Fires when the input field receives focus.
+     */
+    onInputFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+}
+
+/**
+ * The Counter Field component is an input field designed to increment or decrement a numerical value.
+ * It typically includes buttons for increasing or decreasing the count and can be configured to accept user input directly.
+ */
+const CounterField: FC<ICounterFieldProps> = ({
+    label,
+    infoText,
+    required,
+    disabled,
+    readOnly,
+    helperText,
+    ariaLabelIncrement = "Increment value",
+    ariaLabelDecrement = "Decrement value",
+    status = "rest",
+    value,
+    defaultValue = 0,
+    onChange,
+    onInputBlur,
+    onInputFocus,
+    step = 1,
+    min,
+    max,
+    size = "medium",
+    className
+}) => {
+    const isControlled = value !== undefined;
+
+    const [internalStringValue, setInternalStringValue] = useState(String(defaultValue));
+
+    const currentStringValue = isControlled ? String(value) : internalStringValue;
+
+    const validNumericValue = useMemo(() => {
+        const numericValue = Number(currentStringValue);
+        return Number.isFinite(numericValue) ? numericValue : 0;
+    }, [currentStringValue]);
+
+    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const inputValue = event.target.value;
+
+        if (!isControlled) {
+            setInternalStringValue(inputValue);
+        }
+
+        onChange?.(inputValue, event);
+    };
+
+    const handleDecrement = (event: MouseEvent<HTMLButtonElement>) => {
+        const nextValue = validNumericValue - step;
+        const clampedValue = min !== undefined ? Math.max(nextValue, min) : nextValue;
+        const nextValueString = String(clampedValue);
+        if (!isControlled) {
+            setInternalStringValue(nextValueString);
+        }
+        onChange?.(nextValueString, event);
+    };
+
+    const handleIncrement = (event: MouseEvent<HTMLButtonElement>) => {
+        const nextValue = validNumericValue + step;
+        const clampedValue = max !== undefined ? Math.min(nextValue, max) : nextValue;
+        const nextValueString = String(clampedValue);
+        if (!isControlled) {
+            setInternalStringValue(nextValueString);
+        }
+        onChange?.(nextValueString, event);
+    };
+
+    const inputId = useMemo(() => `counter-field-${nanoid()}`, []);
+
+    const onFocusHandler = (e: FocusEvent<HTMLInputElement>) => onInputFocus?.(e);
+
+    const onBlurHandler = (e: FocusEvent<HTMLInputElement>) => {
+        const inputValue = e.target.value;
+        const numericValue = Number(inputValue);
+        if (Number.isFinite(numericValue)) {
+            let clampedValue = numericValue;
+            if (min !== undefined && clampedValue < min) {
+                clampedValue = min;
+            }
+            if (max !== undefined && clampedValue > max) {
+                clampedValue = max;
+            }
+            if (clampedValue !== numericValue) {
+                const clampedValueString = String(clampedValue);
+
+                if (!isControlled) {
+                    setInternalStringValue(clampedValueString);
+                }
+                const syntheticEvent = {
+                    ...e,
+                    target: {
+                        ...e.target,
+                        value: clampedValueString
+                    }
+                } as ChangeEvent<HTMLInputElement>;
+
+                onChange?.(clampedValueString, syntheticEvent);
+            }
+        }
+        onInputBlur?.(e);
+    };
+
+    const isIncrementDisabled = useMemo(() => {
+        if (disabled || readOnly) return true;
+        if (max === undefined) return false;
+        return validNumericValue >= max;
+    }, [disabled, readOnly, max, validNumericValue]);
+
+    const isDecrementDisabled = useMemo(() => {
+        if (disabled || readOnly) return true;
+        if (min === undefined) return false;
+        return validNumericValue <= min;
+    }, [disabled, readOnly, min, validNumericValue]);
+
+    return (
+        <div
+            className={classNames(
+                "counterField",
+                `counterField_status_${status}`,
+                {
+                    counterField_disabled: disabled,
+                    counterField_readOnly: readOnly && !disabled
+                },
+                className
+            )}
+            aria-required={required}
+            aria-invalid={status === "error"}
+            {...((disabled || readOnly) && { tabIndex: -1 })}
+        >
+            {label && (
+                <Label
+                    text={label}
+                    required={required}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    infoText={infoText}
+                    size={size === "large" ? "medium" : size}
+                    labelFor={inputId}
+                />
+            )}
+            <div className="counterField__inputContainer">
+                <Button
+                    appearance="secondary"
+                    className="counterField__button counterField__button_decrement_action"
+                    layout="fill"
+                    size={size}
+                    Icon={Minus}
+                    disabled={isDecrementDisabled}
+                    aria-label={ariaLabelDecrement}
+                    onClick={handleDecrement}
+                />
+                <TextField
+                    id={inputId}
+                    type="number"
+                    autoComplete="off"
+                    onBlur={onBlurHandler}
+                    onFocus={onFocusHandler}
+                    onChange={handleInputChange}
+                    className="counterField__input"
+                    size={size}
+                    value={currentStringValue}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    status={status}
+                />
+                <Button
+                    appearance="secondary"
+                    className="counterField__button counterField__button_increment_action"
+                    layout="fill"
+                    size={size}
+                    Icon={Plus}
+                    disabled={isIncrementDisabled}
+                    aria-label={ariaLabelIncrement}
+                    onClick={handleIncrement}
+                />
+            </div>
+            {helperText && (
+                <div className="counterField__infoContainer">
+                    <HelperText text={helperText} disabled={disabled} status={status} />
+                </div>
+            )}
+        </div>
+    );
+};
+
+export { ICounterFieldProps, CounterField as default };
diff --git a/src/components/molecules/CounterField/index.tsx b/src/components/molecules/CounterField/index.tsx
new file mode 100644
index 00000000..14350e2a
--- /dev/null
+++ b/src/components/molecules/CounterField/index.tsx
@@ -0,0 +1 @@
+export { ICounterFieldProps, default } from "./CounterField";
diff --git a/src/index.ts b/src/index.ts
index e4170e0f..9700f2ff 100755
--- a/src/index.ts
+++ b/src/index.ts
@@ -57,6 +57,7 @@ export { default as Banner, IBannerProps } from "./components/molecules/Banner";
 export { default as TagGroup, ITagGroupProps } from "./components/molecules/TagGroup";
 export { default as DataCard, IDataCardProps } from "./components/molecules/DataCard";
 export { default as RadioGroup, IRadioGroupProps, IRadioOption } from "./components/molecules/RadioGroup";
+export { default as CounterField } from "./components/molecules/CounterField";
 export { default as CheckboxGroup, ICheckboxGroupProps, ICheckboxOption } from "./components/molecules/CheckboxGroup";
 export {
     SegmentedControl,