diff --git a/.changeset/good-boats-matter.md b/.changeset/good-boats-matter.md
new file mode 100644
index 0000000000..60919be3d0
--- /dev/null
+++ b/.changeset/good-boats-matter.md
@@ -0,0 +1,7 @@
+---
+"@milaboratories/milaboratories.monetization-test.ui": patch
+"@milaboratories/milaboratories.ui-examples.ui": patch
+"@milaboratories/uikit": patch
+---
+
+update uikit file/number input
diff --git a/.husky/pre-commit b/.husky/pre-commit
index f4b8a56d99..3e53f23be4 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,2 +1,4 @@
 [ -n "$CI" ] && exit 0
+STAGED=$(git diff --cached --name-only --diff-filter=ACMR)
 pnpm fmt
+[ -n "$STAGED" ] && echo "$STAGED" | xargs git add
diff --git a/etc/blocks/monetization-test/ui/src/pages/MainPage.vue b/etc/blocks/monetization-test/ui/src/pages/MainPage.vue
index 3ab2259abe..1d59b4739e 100644
--- a/etc/blocks/monetization-test/ui/src/pages/MainPage.vue
+++ b/etc/blocks/monetization-test/ui/src/pages/MainPage.vue
@@ -35,11 +35,11 @@ function onProductKeyInput(key: string) {
   }
 }
 
-function validateProductKey(key: string): boolean | string {
+function validateProductKey(key: string): string | undefined {
   if (key.length > 0 && key.length !== PRODUCT_KEY_LENGTH) {
     return "Invalid product key";
   }
-  return true;
+  return undefined;
 }
 
 const dropdownOptions: ListOption<string>[] = [
@@ -142,7 +142,7 @@ const productOptions = [
           :model-value="app.model.args.productKey"
           label="or enter product key"
           clearable
-          :rules="[validateProductKey]"
+          :validate="validateProductKey"
           @update:model-value="onProductKeyInput"
         />
       </PlContainer>
diff --git a/etc/blocks/ui-examples/ui/src/pages/ErrorsPage.vue b/etc/blocks/ui-examples/ui/src/pages/ErrorsPage.vue
index c70a33b167..d3803f2735 100644
--- a/etc/blocks/ui-examples/ui/src/pages/ErrorsPage.vue
+++ b/etc/blocks/ui-examples/ui/src/pages/ErrorsPage.vue
@@ -9,10 +9,10 @@ const data = reactive({
   progressDurationMs: "10000",
 });
 
-function positiveNumberRule(v: string): boolean | string {
+function positiveNumberRule(v: string): string | undefined {
   const n = Number(v);
   if (!Number.isFinite(n) || n <= 0) return "Must be a positive number";
-  return true;
+  return undefined;
 }
 
 const numbers = computed({
@@ -64,7 +64,7 @@ const numbers = computed({
       <PlTextField
         v-model="data.progressDurationMs"
         label="Progress duration (ms)"
-        :rules="[positiveNumberRule]"
+        :validate="positiveNumberRule"
       />
     </PlRow>
   </PlBlockPage>
diff --git a/etc/blocks/ui-examples/ui/src/pages/FormComponentsPage/Main.vue b/etc/blocks/ui-examples/ui/src/pages/FormComponentsPage/Main.vue
index 8cb48c6563..8cf13394fa 100644
--- a/etc/blocks/ui-examples/ui/src/pages/FormComponentsPage/Main.vue
+++ b/etc/blocks/ui-examples/ui/src/pages/FormComponentsPage/Main.vue
@@ -18,7 +18,7 @@ import {
 import { reactive } from "vue";
 
 const data = reactive({
-  text: "some text",
+  text: "some text" as string | undefined,
   single: "A",
   multiple: ["A", "B"],
   multiple2: ["B", "A", "D"],
@@ -52,7 +52,7 @@ const options = listToOptions([
         :compact="data.compactBtnGroup"
       />
       <PlCheckbox v-model="data.compactBtnGroup">Compact btn group component</PlCheckbox>
-      <PlTextField v-model="data.text" label="PlTextField" clearable />
+      <PlTextField v-model="data.text" label="PlTextField" :clearable="() => undefined" />
       <PlTextField v-model="data.text" label="PlTextField (password)" type="password" clearable />
       <PlSearchField v-model="data.text">
         <template #helper>
diff --git a/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue b/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue
index 5aa9545c63..0b4eaefb15 100644
--- a/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue
+++ b/etc/blocks/ui-examples/ui/src/pages/PlNumberFieldPage.vue
@@ -3,10 +3,16 @@ import { PlRow, PlContainer, PlCheckbox, PlNumberField, PlBlockPage } from "@pla
 import { reactive } from "vue";
 
 const data = reactive({
-  useIncrementButtons: true,
-  updateOnEnterOrClickOutside: false,
-  number: 100,
+  number: 100 as number,
+  disableSteps: false,
 });
+
+function updateNumber(value: number) {
+  if (data.number == null || Number.isNaN(data.number)) {
+    data.number = 0;
+  }
+  data.number += value;
+}
 </script>
 
 <template>
@@ -14,15 +20,11 @@ const data = reactive({
     <template #title>PlNumberField</template>
     <pre>number: {{ data.number }} {{ typeof data.number }}</pre>
     <PlRow>
-      <PlCheckbox v-model="data.useIncrementButtons">Use increment buttons</PlCheckbox>
-      <PlCheckbox v-model="data.updateOnEnterOrClickOutside"
-        >Update on enter or click outside</PlCheckbox
-      >
-      <button @click="data.number += 1">Increment number</button>
-      <button @click="data.number -= 1">Decrement number</button>
+      <PlCheckbox v-model="data.disableSteps">Disable increment buttons</PlCheckbox>
+      <button @click="updateNumber(1)">Increment number</button>
+      <button @click="updateNumber(-1)">Decrement number</button>
       <button @click="data.number = NaN">Set NaN</button>
       <button @click="data.number = 102">Set 102</button>
-      <button @click="data.number = '102.2aaaa' as unknown as number">Set '102.2aaaa'</button>
     </PlRow>
     <PlRow no-gap>
       <PlContainer width="400px">
@@ -31,24 +33,24 @@ const data = reactive({
           :min-value="10"
           :max-value="100"
           label="PlNumberField (min: 10, max: 100)"
-          :update-on-enter-or-click-outside="data.updateOnEnterOrClickOutside"
-          :use-increment-buttons="data.useIncrementButtons"
+          clearable
+          :disable-steps="data.disableSteps"
         />
         <PlNumberField
           v-model="data.number"
           :min-value="-5"
           :max-value="200"
           label="PlNumberField (min: -5, max: 200)"
-          :update-on-enter-or-click-outside="data.updateOnEnterOrClickOutside"
-          :use-increment-buttons="data.useIncrementButtons"
+          clearable
+          :disable-steps="data.disableSteps"
         />
         <PlNumberField
           v-model="data.number"
           :max-value="100"
           label="PlNumberField (max: 100 and validate is even)"
           :validate="(v) => (v % 2 === 0 ? undefined : 'Value must be even')"
-          :update-on-enter-or-click-outside="data.updateOnEnterOrClickOutside"
-          :use-increment-buttons="data.useIncrementButtons"
+          :clearable="() => 33"
+          :disable-steps="data.disableSteps"
         />
       </PlContainer>
     </PlRow>
diff --git a/etc/blocks/ui-examples/ui/src/pages/PlTextFieldPage.vue b/etc/blocks/ui-examples/ui/src/pages/PlTextFieldPage.vue
index 97d1811cb5..76166ee2f4 100644
--- a/etc/blocks/ui-examples/ui/src/pages/PlTextFieldPage.vue
+++ b/etc/blocks/ui-examples/ui/src/pages/PlTextFieldPage.vue
@@ -9,11 +9,11 @@ const data = reactive({
   optionalNum: "" as string,
 });
 
-function numberRule(v: string): boolean | string {
-  if (v === "") return true;
+function numberRule(v: string): string | undefined {
+  if (v === "") return undefined;
   const parsed = Number(v);
   if (!Number.isFinite(parsed)) return "Not a number";
-  return true;
+  return undefined;
 }
 </script>
 
@@ -42,13 +42,13 @@ function numberRule(v: string): boolean | string {
       />
 
       <div>Number (string) + clearable</div>
-      <PlTextField v-model="data.num" placeholder="Number" :rules="[numberRule]" clearable />
+      <PlTextField v-model="data.num" placeholder="Number" :validate="numberRule" clearable />
 
       <div>Optional number (string)</div>
       <PlTextField
         v-model="data.optionalNum"
         placeholder="Number"
-        :rules="[numberRule]"
+        :validate="numberRule"
         clearable
       />
 
diff --git a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
index 6103d766dd..64ca897bda 100644
--- a/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
+++ b/lib/ui/uikit/src/components/PlNumberField/PlNumberField.vue
@@ -9,7 +9,6 @@
  * <PlNumberField
  *   v-model="evenNumber"
  *   :validate="(v) => v % 2 !== 0 ? 'Number must be even' : undefined"
- *   :update-on-enter-or-click-outside="true"
  *   label="Even Number"
  * />
  */
@@ -18,18 +17,35 @@ export default {
 };
 </script>
 
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+  generic="
+    R extends true | false,
+    V extends undefined | number,
+    C extends Exclude<V, R extends true ? undefined : never>
+  "
+>
 import "./pl-number-field.scss";
 import DoubleContour from "../../utils/DoubleContour.vue";
 import { useLabelNotch } from "../../utils/useLabelNotch";
 import { computed, ref, useSlots, watch } from "vue";
 import { PlTooltip } from "../PlTooltip";
-import { parseNumber } from "./parseNumber";
+import { PlIcon16 } from "../PlIcon16";
+import { tryParseNumber, numberToDecimalString, validateNumber } from "./parseNumber";
+
+const modelValue = defineModel<V>({ required: true });
+
+const emit = defineEmits<{
+  blur: [value: V];
+  focus: [value: V];
+  enter: [value: V];
+}>();
 
 const props = withDefaults(
   defineProps<{
-    /** Input is disabled if true */
-    disabled?: boolean;
+    /** If `true`, the field is required and will show an error if left empty. */
+    required?: R;
     /** Label on the top border of the field, empty by default */
     label?: string;
     /** Input placeholder, empty by default */
@@ -40,14 +56,16 @@ const props = withDefaults(
     minValue?: number;
     /** If defined - show an error if value is higher */
     maxValue?: number;
-    /** If false - remove buttons on the right */
-    useIncrementButtons?: boolean;
-    /** If true - changes do not apply immediately, they apply only by removing focus from the input (by click enter or by click outside)  */
-    updateOnEnterOrClickOutside?: boolean;
+    /** Input is disabled if true */
+    disabled?: boolean;
+    /** If true - remove buttons on the right */
+    disableSteps?: boolean;
     /** Error message that shows always when it's provided, without other checks */
     errorMessage?: string;
     /** Additional validity check for input value that must return an error text if failed */
     validate?: (v: number) => string | undefined;
+    /** If `true`, shows a clear button that resets value to `undefined`. If a function, calls it to get the reset value. */
+    clearable?: (R extends true ? never : boolean) | (() => C);
     /** Makes some of corners not rounded */
     groupPosition?:
       | "top"
@@ -60,201 +78,185 @@ const props = withDefaults(
       | "bottom-right"
       | "middle";
   }>(),
-  {
-    step: 1,
-    label: undefined,
-    placeholder: undefined,
-    minValue: undefined,
-    maxValue: undefined,
-    useIncrementButtons: true,
-    updateOnEnter: false,
-    errorMessage: undefined,
-    validate: undefined,
-    groupPosition: undefined,
-  },
+  { step: 1 },
 );
 
-const modelValue = defineModel<number | undefined>({ required: true });
-
 const slots = useSlots();
 
 const rootRef = ref<HTMLElement>();
-const inputRef = ref<HTMLInputElement>();
 
 useLabelNotch(rootRef);
 
-function modelToString(v: number | undefined) {
-  return v === undefined ? "" : String(+v); // (+v) to avoid staying in input non-number values if they are provided in model
-}
-
-const parsedResult = computed(() => parseNumber(props, inputValue.value));
-
-const cachedValue = ref<string | undefined>(undefined);
-
-const resetCachedValue = () => (cachedValue.value = undefined);
+const displayText = ref(numberToDecimalString(modelValue.value));
 
-watch(modelValue, (n) => {
-  const r = parsedResult.value;
-  if (r.error || n !== r.value) {
-    resetCachedValue();
-  }
+// Sync display when model changes externally (parent, increment/decrement).
+// Skip if the current input already represents the same value.
+watch(modelValue, (newVal) => {
+  const parsed = tryParseNumber(displayText.value);
+  if (parsed.value === newVal) return;
+  displayText.value = numberToDecimalString(newVal);
 });
 
-const inputValue = computed({
-  get() {
-    return cachedValue.value ?? modelToString(modelValue.value);
-  },
-  set(nextValue: string) {
-    const r = parseNumber(props, nextValue);
+function handleInput(event: Event) {
+  const input = event.target as HTMLInputElement;
+  displayText.value = input.value;
 
-    cachedValue.value = r.cleanInput;
+  const result = tryParseNumber(input.value);
+  if (result.value !== undefined) {
+    modelValue.value = result.value as V;
+  }
+}
 
-    if (r.error || props.updateOnEnterOrClickOutside) {
-      inputRef.value!.value = r.cleanInput;
-    } else {
-      modelValue.value = r.value;
+// On Enter or blur: if parseable, replace display with canonical decimal string.
+// Converts exponential (1e-5) to plain form (0.00001).
+function commitValue() {
+  const text = displayText.value.trim();
+  const result = tryParseNumber(text);
+
+  // Empty or partial (-, ., -.) → clear display and reset model for non-required fields
+  if (text === "" || (result.value === undefined && result.error === undefined)) {
+    displayText.value = "";
+    if (!props.required) {
+      modelValue.value = undefined as V;
     }
-  },
-});
-
-const focused = ref(false);
+    return;
+  }
 
-function applyChanges() {
-  if (parsedResult.value.error === undefined) {
-    modelValue.value = parsedResult.value.value;
+  if (result.value !== undefined) {
+    modelValue.value = result.value as V;
+    displayText.value = numberToDecimalString(result.value);
   }
 }
 
-const errors = computed(() => {
-  let ers: string[] = [];
+const error = computed(() => {
+  if (props.errorMessage) return props.errorMessage;
 
-  if (props.errorMessage) {
-    ers.push(props.errorMessage);
+  const result = tryParseNumber(displayText.value);
+  if (result.error) return result.error;
+  if (result.value !== undefined) {
+    return validateNumber(result.value, props);
   }
 
-  const r = parsedResult.value;
-
-  if (r.error) {
-    ers.push(r.error.message);
-  } else if (props.validate && r.value !== undefined) {
-    const error = props.validate(r.value);
-    if (error) {
-      ers.push(error);
-    }
+  if (props.required && displayText.value.trim() === "") {
+    return "Value is required";
   }
 
-  ers = [...ers];
-
-  return ers.join(" ");
+  return undefined;
 });
 
-const isIncrementDisabled = computed(() => {
-  const r = parsedResult.value;
+const canShowClearable = computed(
+  () =>
+    props.clearable &&
+    (modelValue.value !== undefined || displayText.value.trim() !== "") &&
+    !props.disabled,
+);
 
-  if (props.maxValue !== undefined && r.value !== undefined) {
-    return r.value >= props.maxValue;
+function clear() {
+  if (typeof props.clearable === "function") {
+    modelValue.value = props.clearable();
+    displayText.value = numberToDecimalString(modelValue.value);
+  } else {
+    modelValue.value = undefined as V;
+    displayText.value = "";
   }
+}
 
-  return false;
+const isIncrementDisabled = computed(() => {
+  if (error.value) return true;
+  return (
+    props.maxValue !== undefined &&
+    modelValue.value !== undefined &&
+    modelValue.value >= props.maxValue
+  );
 });
 
 const isDecrementDisabled = computed(() => {
-  const r = parsedResult.value;
-
-  if (props.minValue !== undefined && r.value !== undefined) {
-    return r.value <= props.minValue;
-  }
-
-  return false;
+  if (error.value) return true;
+  return (
+    props.minValue !== undefined &&
+    modelValue.value !== undefined &&
+    modelValue.value <= props.minValue
+  );
 });
 
 const multiplier = computed(() => 10 ** (props.step.toString().split(".").at(1)?.length ?? 0));
 
 function increment() {
-  const r = parsedResult.value;
-
-  const parsedValue = r.value;
-
-  if (!isIncrementDisabled.value) {
-    let nV;
-    if (parsedValue === undefined) {
-      nV = props.minValue ? props.minValue : 0;
-    } else {
-      nV =
-        ((parsedValue || 0) * multiplier.value + props.step * multiplier.value) / multiplier.value;
-    }
-    modelValue.value = props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV;
+  if (isIncrementDisabled.value) return;
+
+  let nV: number;
+  if (modelValue.value === undefined) {
+    nV = props.minValue ?? 0;
+  } else {
+    nV =
+      ((modelValue.value || 0) * multiplier.value + props.step * multiplier.value) /
+      multiplier.value;
   }
+
+  modelValue.value = (props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV) as V;
 }
 
 function decrement() {
-  const r = parsedResult.value;
+  if (isDecrementDisabled.value) return;
+
+  let nV: number;
+  if (modelValue.value === undefined) {
+    nV = 0;
+  } else {
+    nV =
+      ((modelValue.value || 0) * multiplier.value - props.step * multiplier.value) /
+      multiplier.value;
+  }
 
-  const parsedValue = r.value;
+  modelValue.value = (props.minValue !== undefined ? Math.max(props.minValue, nV) : nV) as V;
+}
 
-  if (!isDecrementDisabled.value) {
-    let nV;
-    if (parsedValue === undefined) {
-      nV = 0;
-    } else {
-      nV =
-        ((parsedValue || 0) * multiplier.value - props.step * multiplier.value) / multiplier.value;
-    }
-    modelValue.value = props.minValue !== undefined ? Math.max(props.minValue, nV) : nV;
-  }
+function handleBlur() {
+  commitValue();
+  emit("blur", modelValue.value);
 }
 
-function handleKeyPress(e: { code: string; preventDefault(): void }) {
-  if (props.updateOnEnterOrClickOutside) {
-    if (e.code === "Escape") {
-      inputValue.value = modelToString(modelValue.value);
-      inputRef.value?.blur();
-    }
-    if (e.code === "Enter") {
-      inputRef.value?.blur();
-    }
-  }
+function handleFocus() {
+  emit("focus", modelValue.value);
+}
 
+function handleKeyDown(e: KeyboardEvent) {
   if (e.code === "Enter") {
-    inputValue.value = String(modelValue.value); // to make .1 => 0.1, 10.00 => 10, remove leading zeros etc
+    commitValue();
+    emit("enter", modelValue.value);
   }
 
   if (["ArrowDown", "ArrowUp"].includes(e.code)) {
     e.preventDefault();
   }
 
-  if (props.useIncrementButtons && e.code === "ArrowUp") {
+  if (!props.disableSteps && e.code === "ArrowUp") {
     increment();
   }
 
-  if (props.useIncrementButtons && e.code === "ArrowDown") {
+  if (!props.disableSteps && e.code === "ArrowDown") {
     decrement();
   }
 }
 
-// https://stackoverflow.com/questions/880512/prevent-text-selection-after-double-click#:~:text=If%20you%20encounter%20a%20situation,none%3B%20to%20the%20summary%20element.
-// this prevents selecting of more than input content in some cases,
-// but also disable selecting input content by double-click (useful feature)
-const onMousedown = (ev: MouseEvent) => {
+// Prevent selecting beyond input content on triple-click etc.
+function handleMousedown(ev: MouseEvent) {
   if (ev.detail > 1) {
     ev.preventDefault();
   }
-};
+}
 </script>
 
 <template>
   <div
     ref="rootRef"
-    :class="{ error: !!errors.trim(), disabled: disabled }"
+    :class="{ error: !!error, disabled: disabled }"
     class="pl-number-field d-flex-column"
-    @keydown="handleKeyPress($event)"
+    @keydown="handleKeyDown"
   >
     <div class="pl-number-field__main-wrapper d-flex">
       <DoubleContour class="pl-number-field__contour" :group-position="groupPosition" />
-      <div
-        class="pl-number-field__wrapper flex-grow d-flex flex-align-center"
-        :class="{ withoutArrows: !useIncrementButtons }"
-      >
+      <div class="pl-number-field__wrapper flex-grow d-flex flex-align-center">
         <label v-if="label" class="text-description">
           {{ label }}
           <PlTooltip v-if="slots.tooltip" class="info" position="top">
@@ -265,21 +267,27 @@ const onMousedown = (ev: MouseEvent) => {
         </label>
         <input
           ref="inputRef"
-          v-model="inputValue"
+          type="text"
+          inputmode="numeric"
+          :value="displayText"
           :disabled="disabled"
           :placeholder="placeholder"
           class="text-s flex-grow"
-          @focusin="focused = true"
-          @focusout="
-            focused = false;
-            applyChanges();
-          "
+          @input="handleInput"
+          @focusout="handleBlur"
+          @focusin="handleFocus"
+        />
+        <PlIcon16
+          v-if="canShowClearable"
+          class="pl-number-field__clearable"
+          name="delete-clear"
+          @click.stop="clear"
         />
       </div>
       <div
-        v-if="useIncrementButtons"
+        v-if="!props.disableSteps"
         class="pl-number-field__icons d-flex-column"
-        @mousedown="onMousedown"
+        @mousedown="handleMousedown"
       >
         <div
           :class="{ disabled: isIncrementDisabled }"
@@ -323,8 +331,8 @@ const onMousedown = (ev: MouseEvent) => {
         </div>
       </div>
     </div>
-    <div v-if="errors.trim()" class="pl-number-field__error">
-      {{ errors }}
+    <div v-if="error" class="pl-number-field__error">
+      {{ error }}
     </div>
   </div>
 </template>
diff --git a/lib/ui/uikit/src/components/PlNumberField/__test__/PlNumberField.spec.ts b/lib/ui/uikit/src/components/PlNumberField/__test__/PlNumberField.spec.ts
new file mode 100644
index 0000000000..dea69f0324
--- /dev/null
+++ b/lib/ui/uikit/src/components/PlNumberField/__test__/PlNumberField.spec.ts
@@ -0,0 +1,296 @@
+import PlNumberField from "../PlNumberField.vue";
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+describe("PlNumberField.vue", () => {
+  it("renders correctly with default props", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+      },
+    });
+    expect(wrapper.find("input").element.value).toBe("10");
+  });
+
+  it("displays the label when provided", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+        label: "Test Label",
+      },
+    });
+    expect(wrapper.find("label").text()).toBe("Test Label");
+  });
+
+  it("increments the value when increment button is clicked", async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+        step: 2,
+      },
+    });
+    const incrementButton = wrapper.find(".pl-number-field__icons div:first-child");
+    await incrementButton.trigger("click");
+    expect(wrapper.vm.modelValue).toEqual(12);
+  });
+
+  it("decrements the value when decrement button is clicked", async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+        step: 1,
+      },
+    });
+    const decrementButton = wrapper.find(".pl-number-field__icons div:last-child");
+    await decrementButton.trigger("click");
+    expect(wrapper.vm.modelValue).toEqual(9);
+  });
+
+  it("disables increment button when value exceeds maxValue", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+        maxValue: 10,
+      },
+    });
+    const incrementButton = wrapper.find(".pl-number-field__icons div:first-child");
+    expect(incrementButton.classes()).toContain("disabled");
+  });
+
+  it("disables decrement button when value is below minValue", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 1,
+        minValue: 1,
+      },
+    });
+    const decrementButton = wrapper.find(".pl-number-field__icons div:last-child");
+    expect(decrementButton.classes()).toContain("disabled");
+  });
+
+  it("renders external errorMessage with priority", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 5,
+        minValue: 10,
+        errorMessage: "Custom error message",
+      },
+    });
+    const errorText = wrapper.find(".pl-number-field__error").text();
+    expect(errorText).toBe("Custom error message");
+  });
+
+  it("renders validation error when no external errorMessage", () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 5,
+        minValue: 10,
+      },
+    });
+    const errorText = wrapper.find(".pl-number-field__error").text();
+    expect(errorText).toBe("Value must be higher than 10");
+  });
+
+  it("disables step buttons when input has an error", async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+      },
+    });
+    const input = wrapper.find("input");
+    await input.setValue("abc");
+
+    const incrementButton = wrapper.find(".pl-number-field__icons div:first-child");
+    const decrementButton = wrapper.find(".pl-number-field__icons div:last-child");
+    expect(incrementButton.classes()).toContain("disabled");
+    expect(decrementButton.classes()).toContain("disabled");
+  });
+
+  describe("typing and value updates", () => {
+    it("updates model for valid input", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 5 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("15");
+      expect(wrapper.vm.modelValue).toEqual(15);
+    });
+
+    it("does not change model for invalid input", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 15 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("abc");
+      expect(wrapper.vm.modelValue).toEqual(15);
+    });
+
+    it("clears to undefined for partial input (-) on blur", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 15 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("-");
+      await input.trigger("focusout");
+      expect(wrapper.vm.modelValue).toEqual(undefined);
+      expect(input.element.value).toBe("");
+    });
+
+    it("clears to undefined for partial input (.) on blur", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 15 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue(".");
+      await input.trigger("focusout");
+      expect(wrapper.vm.modelValue).toEqual(undefined);
+      expect(input.element.value).toBe("");
+    });
+
+    it("accepts negative numbers", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 5 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("-1");
+      await input.trigger("focusout");
+      expect(wrapper.vm.modelValue).toEqual(-1);
+      expect(input.element.value).toBe("-1");
+    });
+
+    it("shows separator error for comma-formatted input", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 5 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("1,5");
+      expect(wrapper.vm.modelValue).toEqual(5); // unchanged
+      expect(wrapper.find(".pl-number-field__error").text()).toContain("separator");
+    });
+  });
+
+  describe("blur/enter formatting", () => {
+    it("formats trailing dot on blur: '123.' → '123'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("123.");
+      expect(wrapper.vm.modelValue).toEqual(123);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("123");
+    });
+
+    it("formats leading dot on blur: '.5' → '0.5'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue(".5");
+      expect(wrapper.vm.modelValue).toEqual(0.5);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("0.5");
+    });
+
+    it("formats leading zero on blur: '01' → '1'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("01");
+      expect(wrapper.vm.modelValue).toEqual(1);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("1");
+    });
+
+    it("formats trailing zeros on blur: '1.10' → '1.1'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("1.10");
+      expect(wrapper.vm.modelValue).toEqual(1.1);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("1.1");
+    });
+
+    it("formats exponential on blur: '1e-5' → '0.00001'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("1e-5");
+      expect(wrapper.vm.modelValue).toEqual(0.00001);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("0.00001");
+    });
+
+    it("formats partial exponential on blur: '1e' → '1'", async () => {
+      const wrapper = mount(PlNumberField, {
+        props: { modelValue: 0 },
+      });
+      const input = wrapper.find("input");
+
+      await input.setValue("1e");
+      expect(wrapper.vm.modelValue).toEqual(1);
+
+      await input.trigger("focusout");
+      expect(input.element.value).toBe("1");
+    });
+  });
+
+  it("update model with undefined when input is cleared", async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+      },
+    });
+    const input = wrapper.find("input");
+    await input.setValue("");
+    await input.trigger("focusout");
+    expect(wrapper.vm.modelValue).toEqual(undefined);
+  });
+
+  it("external modelValue change", async () => {
+    const wrapper = mount(PlNumberField, {
+      props: {
+        modelValue: 10,
+      },
+    });
+
+    const input = wrapper.find("input");
+    await input.trigger("focusout");
+    expect(wrapper.vm.modelValue).toEqual(10);
+    expect(input.element.value).toEqual("10");
+
+    await input.setValue("");
+    await input.trigger("focusout");
+    expect(wrapper.vm.modelValue).toEqual(undefined);
+
+    wrapper.setProps({ modelValue: 1 });
+
+    await input.trigger("focusout");
+    expect(wrapper.vm.modelValue).toEqual(1);
+    expect(input.element.value).toEqual("1");
+
+    await input.setValue("10");
+    expect(wrapper.vm.modelValue).toEqual(10);
+    expect(input.element.value).toEqual("10");
+  });
+});
diff --git a/lib/ui/uikit/src/components/PlNumberField/__test__/parseNumber.spec.ts b/lib/ui/uikit/src/components/PlNumberField/__test__/parseNumber.spec.ts
new file mode 100644
index 0000000000..721eba526f
--- /dev/null
+++ b/lib/ui/uikit/src/components/PlNumberField/__test__/parseNumber.spec.ts
@@ -0,0 +1,204 @@
+import { describe, expect, it } from "vitest";
+import { tryParseNumber, numberToDecimalString, validateNumber } from "../parseNumber";
+
+describe("tryParseNumber", () => {
+  describe("empty and partial inputs → {} (no value, no error)", () => {
+    it.each(["", "-", ".", "-."])("'%s' → {}", (input) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBeUndefined();
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("trailing dot → value, no error", () => {
+    it.each([
+      ["123.", 123],
+      ["-123.", -123],
+      ["0.", 0],
+    ])("'%s' → { value: %d }", (input, expected) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBe(expected);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("partial exponential → completed and parsed", () => {
+    it.each([
+      ["1e", 1],
+      ["1e-", 1],
+      ["1e+", 1],
+      ["5e", 5],
+      ["5E", 5],
+      ["5e-", 5],
+      ["5e+", 5],
+    ])("'%s' → { value: %d }", (input, expected) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBe(expected);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("exact match → value, no error", () => {
+    it.each([
+      ["123", 123],
+      ["-5", -5],
+      ["0", 0],
+      ["0.5", 0.5],
+      ["-0.5", -0.5],
+      ["1000", 1000],
+      ["999999", 999999],
+    ])("'%s' → { value: %d }", (input, expected) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBe(expected);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("decimal form of very small numbers → value, no error", () => {
+    it("'0.0000000001' → { value: 1e-10 }", () => {
+      const result = tryParseNumber("0.0000000001");
+      expect(result.value).toBe(1e-10);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("exponential notation → value, no error", () => {
+    it.each([
+      ["1e-5", 0.00001],
+      ["2e+10", 2e10],
+      ["1E-5", 0.00001],
+      ["1e5", 1e5],
+      ["1.5e2", 150],
+      ["-3e4", -30000],
+    ])("'%s' → { value: %d }", (input, expected) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBe(expected);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("non-canonical but parseable → value, no error (formatted on blur)", () => {
+    it.each([
+      [".5", 0.5],
+      ["01", 1],
+      ["007", 7],
+      ["1.0", 1],
+      ["1.10", 1.1],
+      ["+5", 5],
+      ["00.5", 0.5],
+    ])("'%s' → { value: %d }", (input, expected) => {
+      const result = tryParseNumber(input);
+      expect(result.value).toBe(expected);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("locale-formatted numbers → separator error", () => {
+    it.each([
+      "1,5",
+      "1.232,111",
+      "1.237.62",
+      "555.555.555,100",
+      "1,222,333.05",
+      "1 234",
+      "1.000.000",
+    ])("'%s' → separator error", (input) => {
+      const result = tryParseNumber(input);
+      expect(result.error).toBe("Use dot as decimal separator, e.g. 3.14");
+      expect(result.value).toBeUndefined();
+    });
+  });
+
+  describe("non-numeric input → 'not a number' error", () => {
+    it.each(["abc", "12abc", "1.237.asdf62", "hello", "#$%", "1.2.3a"])(
+      "'%s' → not a number error",
+      (input) => {
+        const result = tryParseNumber(input);
+        expect(result.error).toBe("Value is not a number");
+        expect(result.value).toBeUndefined();
+      },
+    );
+  });
+
+  describe("precision loss → error with actual value", () => {
+    it("too many decimal digits", () => {
+      const result = tryParseNumber("0.1234567890123456789");
+      expect(result.error).toMatch(/^Precision exceeded/);
+      expect(result.value).toBeUndefined();
+    });
+
+    it("integer exceeds safe range", () => {
+      const result = tryParseNumber("9007199254740993");
+      expect(result.error).toMatch(/^Precision exceeded/);
+      expect(result.value).toBeUndefined();
+    });
+
+    it("trailing zeros beyond precision", () => {
+      const result = tryParseNumber("1.00000000000000001");
+      expect(result.error).toMatch(/^Precision exceeded/);
+      expect(result.value).toBeUndefined();
+    });
+
+    it("safe integer does not trigger precision error", () => {
+      const result = tryParseNumber("9007199254740991");
+      expect(result.value).toBe(9007199254740991);
+      expect(result.error).toBeUndefined();
+    });
+  });
+
+  describe("whitespace handling", () => {
+    it("trims leading/trailing spaces", () => {
+      const result = tryParseNumber("  123  ");
+      expect(result.value).toBe(123);
+    });
+
+    it("space inside number → separator error", () => {
+      const result = tryParseNumber("1 234");
+      expect(result.error).toBe("Use dot as decimal separator, e.g. 3.14");
+    });
+  });
+});
+
+describe("numberToDecimalString", () => {
+  it("undefined → empty string", () => {
+    expect(numberToDecimalString(undefined)).toBe("");
+  });
+
+  it("plain numbers pass through", () => {
+    expect(numberToDecimalString(123)).toBe("123");
+    expect(numberToDecimalString(0.5)).toBe("0.5");
+    expect(numberToDecimalString(-42)).toBe("-42");
+    expect(numberToDecimalString(0)).toBe("0");
+  });
+
+  it("converts exponential to decimal form", () => {
+    expect(numberToDecimalString(1e-7)).toBe("0.0000001");
+    expect(numberToDecimalString(1e-10)).toBe("0.0000000001");
+    expect(numberToDecimalString(2e10)).toBe("20000000000");
+  });
+});
+
+describe("validateNumber", () => {
+  it("returns undefined when within bounds", () => {
+    expect(validateNumber(5, { minValue: 0, maxValue: 10 })).toBeUndefined();
+  });
+
+  it("returns error when below minValue", () => {
+    expect(validateNumber(-1, { minValue: 0 })).toBe("Value must be higher than 0");
+  });
+
+  it("returns error when above maxValue", () => {
+    expect(validateNumber(11, { maxValue: 10 })).toBe("Value must be less than 10");
+  });
+
+  it("runs custom validate function", () => {
+    const validate = (v: number) => (v % 2 !== 0 ? "Must be even" : undefined);
+    expect(validateNumber(3, { validate })).toBe("Must be even");
+    expect(validateNumber(4, { validate })).toBeUndefined();
+  });
+
+  it("minValue/maxValue checked before custom validate", () => {
+    const validate = (v: number) => (v % 2 !== 0 ? "Must be even" : undefined);
+    expect(validateNumber(-1, { minValue: 0, validate })).toBe("Value must be higher than 0");
+  });
+});
diff --git a/lib/ui/uikit/src/components/PlNumberField/__tests__/PlNumberField.spec.ts b/lib/ui/uikit/src/components/PlNumberField/__tests__/PlNumberField.spec.ts
deleted file mode 100644
index 665199741f..0000000000
--- a/lib/ui/uikit/src/components/PlNumberField/__tests__/PlNumberField.spec.ts
+++ /dev/null
@@ -1,182 +0,0 @@
-import PlNumberField from "../PlNumberField.vue";
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-
-describe("NumberInput.vue", () => {
-  it("renders correctly with default props", () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 10,
-      },
-    });
-    expect(wrapper.find("input").element.value).toBe("10");
-  });
-
-  it("displays the label when provided", () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 10,
-        label: "Test Label",
-      },
-    });
-    expect(wrapper.find("label").text()).toBe("Test Label");
-  });
-
-  it("increments the value when increment button is clicked", async () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 10,
-        step: 2,
-      },
-    });
-    const incrementButton = wrapper.find(".pl-number-field__icons div:first-child");
-    await incrementButton.trigger("click");
-    expect(wrapper.vm.modelValue).toEqual(12);
-  });
-
-  it("decrements the value when decrement button is clicked", async () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 10,
-        step: 1,
-      },
-    });
-    const decrementButton = wrapper.find(".pl-number-field__icons div:last-child");
-    await decrementButton.trigger("click");
-    expect(wrapper.vm.modelValue).toEqual(9);
-  });
-
-  it("disables increment button when value exceeds maxValue", () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 10,
-        maxValue: 10,
-      },
-    });
-    const incrementButton = wrapper.find(".pl-number-field__icons div:first-child");
-    expect(incrementButton.classes()).toContain("disabled");
-  });
-
-  it("disables decrement button when value is below minValue", () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 1,
-        minValue: 1,
-      },
-    });
-    const decrementButton = wrapper.find(".pl-number-field__icons div:last-child");
-    expect(decrementButton.classes()).toContain("disabled");
-  });
-
-  it("renders error messages when there are validation errors", () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 5,
-        minValue: 10,
-        errorMessage: "Custom error message",
-      },
-    });
-    expect(wrapper.find(".pl-number-field__error").text()).toContain("Custom error message");
-    expect(wrapper.find(".pl-number-field__error").text()).toContain(
-      "Value must be higher than 10",
-    );
-  });
-
-  it("validates and updates the computedValue when the user types in the input field", async () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 5,
-      },
-    });
-    const input = wrapper.find("input");
-    await input.setValue("1.1.1");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(1.1);
-
-    await input.setValue("15");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(15);
-
-    await input.setValue(".");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(15);
-
-    await input.setValue("..");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(15);
-    expect(input.element.value).toEqual(".");
-
-    await input.setValue(",,");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(15);
-    expect(input.element.value).toEqual(".");
-
-    await input.setValue("-");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(15);
-    expect(input.element.value).toEqual("-");
-
-    await input.setValue("-a");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(15);
-    expect(input.element.value).toEqual("-");
-
-    await input.setValue("-1");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(-1);
-    expect(input.element.value).toEqual("-1");
-
-    await input.setValue(",");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(-1);
-
-    await input.setValue("1,1");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(1.1);
-    expect(input.element.value).toEqual("1.1");
-
-    await input.setValue("-1.1");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(-1.1);
-    expect(input.element.value).toEqual("-1.1");
-  });
-
-  it("update model with undefined when input is cleared", async () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 10,
-      },
-    });
-    const input = wrapper.find("input");
-    await input.setValue("");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(undefined);
-  });
-
-  it("external modelValue change", async () => {
-    const wrapper = mount(PlNumberField, {
-      props: {
-        modelValue: 10,
-      },
-    });
-
-    const input = wrapper.find("input");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(10);
-    expect(input.element.value).toEqual("10");
-
-    await input.setValue("");
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(undefined);
-
-    wrapper.setProps({ modelValue: 1 });
-
-    await input.trigger("focusout");
-    expect(wrapper.vm.modelValue).toEqual(1);
-    expect(input.element.value).toEqual("1");
-
-    await input.setValue(10);
-    expect(wrapper.vm.modelValue).toEqual(10);
-    expect(input.element.value).toEqual("10");
-  });
-});
diff --git a/lib/ui/uikit/src/components/PlNumberField/parseNumber.ts b/lib/ui/uikit/src/components/PlNumberField/parseNumber.ts
index 4b0cf1907f..c5ff29bc47 100644
--- a/lib/ui/uikit/src/components/PlNumberField/parseNumber.ts
+++ b/lib/ui/uikit/src/components/PlNumberField/parseNumber.ts
@@ -1,124 +1,151 @@
-type ParseResult = {
-  error?: Error;
-  value?: number;
-  cleanInput: string;
-};
-
-const NUMBER_REGEX = /^[-−–+]?(\d+)?[.,]?(\d+)?$/; // parseFloat works without errors on strings with multiple dots, or letters in value
-
-function isPartial(v: string) {
-  return v === "." || v === "," || v === "-";
-}
-
-function clearNumericValue(v: string) {
-  v = v.trim();
-  v = v.replace(",", ".");
-  v = v.replace("−", "-"); // minus, replacing for the case of input the whole copied value
-  v = v.replace("–", "-"); // dash, replacing for the case of input the whole copied value
-  v = v.replace("+", "");
-  return v;
+/**
+ * Strict number parser. No locale guessing, no normalization.
+ * Non-canonical forms (leading zeros, trailing dots, etc.) are accepted —
+ * formatting to canonical form happens on blur/enter in the component.
+ *
+ * Input/output table (covers ~90% of real cases):
+ *
+ * | Input               | Result                          | Reason                          |
+ * |---------------------|---------------------------------|---------------------------------|
+ * | ""                  | {}                              | empty                           |
+ * | "-"                 | {}                              | partial                         | apply blur/enter format
+ * | "."                 | {}                              | partial                         | apply blur/enter format
+ * | "-."                | {}                              | partial                         | apply blur/enter format
+ * | "123."              | { value: 123 }                  | trailing dot                    | apply blur/enter format
+ * | "1e"                | { value: 1 }                    | partial exp → 1e+0              | apply blur/enter format
+ * | "1e-"               | { value: 1 }                    | partial exp → 1e-0              | apply blur/enter format
+ * | "1e+"               | { value: 1 }                    | partial exp → 1e+0              | apply blur/enter format
+ * | "123"               | { value: 123 }                  | exact match                     |
+ * | "-5"                | { value: -5 }                   | exact match                     |
+ * | "0.5"               | { value: 0.5 }                  | exact match                     |
+ * | "0.0000000001"      | { value: 1e-10 }                | decimal form matches            |
+ * | "1e-5"              | { value: 0.00001 }              | exponential notation            | apply blur/enter format
+ * | "2e+10"             | { value: 2e10 }                 | exponential notation            | apply blur/enter format
+ * | ".5"                | { value: 0.5 }                  | not canonical                   | apply blur/enter format
+ * | "01"                | { value: 1 }                    | leading zero                    | apply blur/enter format
+ * | "1.0"               | { value: 1 }                    | trailing zero                   | apply blur/enter format
+ * | "1.10"              | { value: 1.1 }                  | trailing zero                   | apply blur/enter format
+ * | "+5"                | { value: 5 }                    | unnecessary plus                | apply blur/enter format
+ * | "1,5"               | { error: "...separator..." }    | comma instead of dot            |
+ * | "1.232,111"         | { error: "...separator..." }    | EU locale format                |
+ * | "1.237.62"          | { error: "...separator..." }    | multiple dots (EU thousands)    |
+ * | "555.555.555,100"   | { error: "...separator..." }    | EU locale format                |
+ * | "1,222,333.05"      | { error: "...separator..." }    | US locale format                |
+ * | "abc"               | { error: "not a number" }       | letters                         |
+ * | "12abc"             | { error: "not a number" }       | letters mixed in                |
+ * | "1.237.asdf62"      | { error: "not a number" }       | letters mixed in                |
+ * | "9007199254740993"  | { error: "precision..." }       | integer exceeds safe range      |
+ * | "0.1234567890123456789" | { error: "precision..." }    | too many digits for float64     |
+ */
+
+export type ParseResult =
+  | { value: number; error?: undefined }
+  | { value?: undefined; error: string }
+  | { value?: undefined; error?: undefined };
+
+const EXP_RE = /^-?\d+(\.\d+)?e[+-]?\d+$/i;
+const EXP_PARTIAL_RE = /^-?\d+(\.\d+)?e[+-]?$/i;
+
+/** "-", ".", "-." — NaN for Number() but clearly in-progress typing */
+function isPartialInput(str: string): boolean {
+  return str === "-" || str === "." || str === "-.";
 }
 
-function stringToNumber(v: string) {
-  return parseFloat(clearNumericValue(v));
-}
-
-function clearInput(v: string): string {
-  v = v.trim();
-
-  if (isPartial(v)) {
-    return v;
+/**
+ * Normalize a decimal string by removing cosmetic differences:
+ * leading +, leading zeros, trailing zeros after decimal, trailing dot.
+ * Used to compare user input with canonical float representation.
+ */
+function normalizeDecimalString(s: string): string {
+  let sign = "";
+  if (s.startsWith("-")) {
+    sign = "-";
+    s = s.slice(1);
+  } else if (s.startsWith("+")) {
+    s = s.slice(1);
   }
 
-  if (/^-[^0-9.]/.test(v)) {
-    return "-";
-  }
+  // Remove leading zeros (keep one before decimal point)
+  s = s.replace(/^0+(?=\d)/, "");
+  if (s.startsWith(".")) s = "0" + s;
 
-  const match = v.match(/^(.*)[.,][^0-9].*$/);
-  if (match) {
-    return match[1] + ".";
+  // Remove trailing zeros after decimal point, then trailing dot
+  if (s.includes(".")) {
+    s = s.replace(/0+$/, "").replace(/\.$/, "");
   }
 
-  if (v.match(NUMBER_REGEX)) {
-    return clearNumericValue(v);
-  }
+  if (s === "" || s === "0") return "0";
 
-  const n = stringToNumber(v);
+  return sign + s;
+}
 
-  return isNaN(n) ? "" : String(+n);
+/** Complete partial exponential: "1e" → "1e+0", "1e-" → "1e-0", "1e+" → "1e+0" */
+function completeExponential(str: string): string {
+  if (/e$/i.test(str)) return str + "+0";
+  if (/e[+-]$/i.test(str)) return str + "0";
+  return str;
 }
 
-export function parseNumber(
-  props: {
-    minValue?: number;
-    maxValue?: number;
-    validate?: (v: number) => string | undefined;
-  },
-  str: string,
-): ParseResult {
+export function tryParseNumber(str: string): ParseResult {
   str = str.trim();
-
-  const cleanInput = clearInput(str);
-
-  if (str === "") {
-    return {
-      value: undefined,
-      cleanInput,
-    };
+  if (str === "") return {};
+  if (isPartialInput(str)) return {};
+
+  // Exponential notation (full or partial)
+  if (EXP_RE.test(str) || EXP_PARTIAL_RE.test(str)) {
+    const completed = completeExponential(str);
+    const n = Number(completed);
+    if (!Number.isFinite(n)) return { error: "Value is not a number" };
+    return { value: n };
   }
 
-  if (!str.match(NUMBER_REGEX)) {
-    return {
-      error: Error("Value is not a number"),
-      cleanInput,
-    };
+  const n = Number(str);
+  if (!Number.isFinite(n)) {
+    // Only digits, dots, commas, sign, spaces → likely a locale/format issue
+    if (/^[-+]?[\d.,\s]+$/.test(str)) {
+      return { error: "Use dot as decimal separator, e.g. 3.14" };
+    }
+    return { error: "Value is not a number" };
   }
 
-  if (isPartial(str)) {
-    return {
-      error: Error("Enter a number"),
-      cleanInput,
-    };
+  // Precision loss: input has more precision than float64 can represent
+  const canonical = numberToDecimalString(n);
+  const normalized = normalizeDecimalString(str);
+  if (normalized !== canonical) {
+    return { error: `Precision exceeded, actual value: ${canonical}` };
   }
 
-  const value = stringToNumber(str);
+  return { value: n };
+}
 
-  if (isNaN(value)) {
-    return {
-      error: Error("Value is not a number"),
-      cleanInput,
-    };
+/**
+ * Converts a number to a plain decimal string (no exponential notation).
+ * E.g. 1e-7 → "0.0000001", 2e+21 → "2000000000000000000000"
+ */
+export function numberToDecimalString(n: number | undefined): string {
+  if (n === undefined) return "";
+  const s = String(n);
+  if (!s.includes("e") && !s.includes("E")) return s;
+  try {
+    return n.toFixed(20).replace(/\.?0+$/, "");
+  } catch {
+    return s;
   }
+}
 
+export function validateNumber(
+  value: number,
+  props: {
+    minValue?: number;
+    maxValue?: number;
+    validate?: (v: number) => string | undefined;
+  },
+): string | undefined {
   if (props.minValue !== undefined && value < props.minValue) {
-    return {
-      error: Error(`Value must be higher than ${props.minValue}`),
-      value,
-      cleanInput,
-    };
+    return `Value must be higher than ${props.minValue}`;
   }
-
   if (props.maxValue !== undefined && value > props.maxValue) {
-    return {
-      error: Error(`Value must be less than ${props.maxValue}`),
-      value,
-      cleanInput,
-    };
+    return `Value must be less than ${props.maxValue}`;
   }
-
-  if (props.validate) {
-    const error = props.validate(value);
-    if (error) {
-      return {
-        error: Error(error),
-        value,
-        cleanInput,
-      };
-    }
-  }
-
-  return {
-    value,
-    cleanInput,
-  };
+  return props.validate?.(value);
 }
diff --git a/lib/ui/uikit/src/components/PlNumberField/pl-number-field.scss b/lib/ui/uikit/src/components/PlNumberField/pl-number-field.scss
index 87e6854575..5854408edc 100644
--- a/lib/ui/uikit/src/components/PlNumberField/pl-number-field.scss
+++ b/lib/ui/uikit/src/components/PlNumberField/pl-number-field.scss
@@ -7,6 +7,7 @@
   --label-offset-right-x: 8px;
   --label-color: var(--txt-01);
   --color-hint: #9d9eae;
+  --show-clearable: none;
 
   // overflow: hidden;
 
@@ -22,12 +23,10 @@
 
   &__wrapper {
     padding-left: 12px;
-    // background-color: rgb(111, 94, 94);
+    padding-right: 8px;
+    gap: 8px;
     border-radius: 6px;
   }
-  &__wrapper.withoutArrows {
-    padding-right: 12px;
-  }
 
   &__icons {
     // background-color: green;
@@ -60,6 +59,12 @@
     border-bottom: 1px solid var(--contour-color);
   }
 
+  &__clearable {
+    display: var(--show-clearable) !important;
+    --icon-color: var(--ic-02) !important;
+    cursor: pointer;
+  }
+
   &__hint {
     margin-top: 3px;
     color: var(--color-hint);
@@ -90,6 +95,14 @@
     transition: all 0.3s;
   }
 
+  &:hover {
+    --show-clearable: inline-block;
+  }
+
+  &:focus-within {
+    --show-clearable: inline-block;
+  }
+
   &:focus-within:not(.error) {
     --label-color: var(--txt-focus);
     --contour-color: var(--border-color-focus);
diff --git a/lib/ui/uikit/src/components/PlSearchField/PlSearchField.vue b/lib/ui/uikit/src/components/PlSearchField/PlSearchField.vue
index 12ad170236..1b6db6f1a9 100644
--- a/lib/ui/uikit/src/components/PlSearchField/PlSearchField.vue
+++ b/lib/ui/uikit/src/components/PlSearchField/PlSearchField.vue
@@ -1,14 +1,14 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="V extends undefined | string, C extends V">
 import { PlIcon16 } from "../PlIcon16";
 import { PlIcon24 } from "../PlIcon24";
 import { computed } from "vue";
 import PlTooltip from "../PlTooltip/PlTooltip.vue";
 
-const model = defineModel<string>({ required: true });
+const model = defineModel<V>({ required: true });
 
 const props = defineProps<{
   modelValue?: string;
-  clearable?: boolean;
+  clearable?: boolean | (() => C);
   placeholder?: string;
   disabled?: boolean;
   helper?: string;
@@ -20,7 +20,11 @@ const slots = defineSlots<{
 const nonEmpty = computed(() => model.value != null && model.value.length > 0);
 const hasHelper = computed(() => props.helper != null || slots.helper != null);
 
-const clear = () => (model.value = "");
+const clear = () => {
+  if (props.clearable) {
+    model.value = (typeof props.clearable === "function" ? props.clearable() : "") as V;
+  }
+};
 </script>
 
 <template>
diff --git a/lib/ui/uikit/src/components/PlTextField/PlTextField.vue b/lib/ui/uikit/src/components/PlTextField/PlTextField.vue
index d2ad04b49d..3dd96e9ea4 100644
--- a/lib/ui/uikit/src/components/PlTextField/PlTextField.vue
+++ b/lib/ui/uikit/src/components/PlTextField/PlTextField.vue
@@ -7,13 +7,20 @@ export default {
 };
 </script>
 
-<script lang="ts" setup>
+<script
+  lang="ts"
+  setup
+  generic="
+    R extends true | false,
+    V extends undefined | string,
+    C extends Exclude<V, R extends true ? undefined : never>
+  "
+>
 import { computed, ref, useSlots } from "vue";
 import SvgRequired from "../../assets/images/required.svg?raw";
 import { getErrorMessage } from "../../helpers/error.ts";
 import DoubleContour from "../../utils/DoubleContour.vue";
 import { useLabelNotch } from "../../utils/useLabelNotch";
-import { useValidation } from "../../utils/useValidation";
 import { PlIcon16 } from "../PlIcon16";
 import { PlIcon24 } from "../PlIcon24";
 import { PlSvg } from "../PlSvg";
@@ -25,58 +32,37 @@ const slots = useSlots();
 /**
  * The current value of the input field.
  */
-const model = defineModel<string>({
-  default: "",
+const model = defineModel<V>({
+  required: true,
 });
 
 const props = defineProps<{
-  /**
-   * The label to display above the input field.
-   */
+  /** The label to display above the input field. */
   label?: string;
   /**
    * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).
+   * If a function, calls it to get the reset value.
    */
-  clearable?: boolean;
-  /**
-   * If `true`, the input field is marked as required.
-   */
-  required?: boolean;
-  /**
-   * An error message to display below the input field.
-   */
+  clearable?: (R extends true ? never : boolean) | (() => C);
+  /** If `true`, the input field is marked as required and will show an error if left empty. */
+  required?: R;
+  /** An error message to display below the input field. */
   error?: unknown;
-  /**
-   * A helper text to display below the input field when there are no errors.
-   */
+  /** A helper text to display below the input field when there are no errors. */
   helper?: string;
-  /**
-   * A placeholder text to display inside the input field when it is empty.
-   */
+  /** A placeholder text to display inside the input field when it is empty. */
   placeholder?: string;
-  /**
-   * If `true`, the input field is disabled and cannot be interacted with.
-   */
+  /** If `true`, the input field is disabled and cannot be interacted with. */
   disabled?: boolean;
-  /**
-   * If `true`, the input field has a dashed border.
-   */
+  /** If `true`, the input field has a dashed border. */
   dashed?: boolean;
-  /**
-   * A prefix text to display inside the input field before the value.
-   */
+  /** A prefix text to display inside the input field before the value. */
   prefix?: string;
-  /**
-   * An array of validation rules to apply to the input field. Each rule is a function that takes the current value and returns `true` if valid or an error message if invalid.
-   */
-  rules?: ((v: string) => boolean | string)[];
-  /**
-   * The string specifies whether the field should be a password or not, value could be "password" or undefined.
-   */
+  /** Additional validity check for input value that must return an error text if failed */
+  validate?: (v: V) => string | undefined;
+  /** The string specifies whether the field should be a password or not, value could be "password" or undefined. */
   type?: "password";
-  /**
-   * Makes some of corners not rounded
-   * */
+  /** Makes some of corners not rounded */
   groupPosition?:
     | "top"
     | "bottom"
@@ -107,24 +93,26 @@ const passwordIcon = computed(() => (showPassword.value ? "view-show" : "view-hi
 
 const clear = () => {
   if (props.clearable) {
-    model.value = "";
+    model.value = (typeof props.clearable === "function" ? props.clearable() : "") as V;
   }
 };
 
-const validationData = useValidation(model, props.rules || []);
-
 const isEmpty = computed(() => model.value === "");
 
-const nonEmpty = computed(() => !isEmpty.value);
-
 const displayErrors = computed(() => {
   const errors: string[] = [];
   const propsError = getErrorMessage(props.error);
   if (propsError) {
     errors.push(propsError);
   }
-  if (!validationData.value.isValid) {
-    errors.push(...validationData.value.errors);
+  if (props.validate) {
+    const error = props.validate(model.value as V);
+    if (error) {
+      errors.push(error);
+    }
+  }
+  if (props.required && isEmpty.value) {
+    errors.push("Value is required");
   }
   return errors;
 });
@@ -132,7 +120,7 @@ const displayErrors = computed(() => {
 const hasErrors = computed(() => displayErrors.value.length > 0);
 
 const canShowClearable = computed(
-  () => props.clearable && nonEmpty.value && props.type !== "password" && !props.disabled,
+  () => props.clearable && !isEmpty.value && props.type !== "password" && !props.disabled,
 );
 
 const togglePasswordVisibility = () => (showPassword.value = !showPassword.value);
@@ -151,7 +139,7 @@ useLabelNotch(rootRef);
         error: hasErrors,
         disabled,
         dashed,
-        nonEmpty,
+        nonEmpty: !isEmpty,
       }"
     >
       <label v-if="label" ref="label">
diff --git a/lib/ui/uikit/src/components/PlTextField/__tests__/TextField.spec.ts b/lib/ui/uikit/src/components/PlTextField/__tests__/TextField.spec.ts
index 731788c82a..a933cac48c 100644
--- a/lib/ui/uikit/src/components/PlTextField/__tests__/TextField.spec.ts
+++ b/lib/ui/uikit/src/components/PlTextField/__tests__/TextField.spec.ts
@@ -18,7 +18,7 @@ describe("TextField", () => {
     const wrapper = mount(PlTextField, {
       props: {
         modelValue: "initialText",
-        "onUpdate:modelValue": (e: string) => wrapper.setProps({ modelValue: e }),
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
       },
     });
 
@@ -31,7 +31,7 @@ describe("TextField", () => {
       props: {
         modelValue: "initialText" as string | undefined,
         clearable: true,
-        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
+        "onUpdate:modelValue": (e: string | undefined) => wrapper.setProps({ modelValue: e }),
       },
     });
 
diff --git a/migrations/2026-03-13-uikit-validation-and-field-components-api.md b/migrations/2026-03-13-uikit-validation-and-field-components-api.md
new file mode 100644
index 0000000000..b29a94d942
--- /dev/null
+++ b/migrations/2026-03-13-uikit-validation-and-field-components-api.md
@@ -0,0 +1,93 @@
+## PlTextField
+
+### `parse` prop removed — use `PlNumberField` for numeric inputs
+
+The `:parse` prop has been removed from `PlTextField`. If you were using it to parse numbers, switch to `PlNumberField`:
+
+```diff
+- <PlTextField v-model="count" :parse="parseNumber" />
++ <PlNumberField v-model="count" />
+```
+
+### `model-value` is now required and supports `undefined`
+
+Previously, `v-model` defaulted to `""`. Now it is required and accepts `string | undefined`.
+
+```diff
+- <PlTextField v-model="text" />
++ <PlTextField v-model="text" />  <!-- text must be explicitly initialized -->
+```
+
+### `rules` → `validate`
+
+The `:rules` array prop has been replaced with a single `:validate` function that returns an error string or `undefined`.
+
+```diff
+- <PlTextField :rules="[(v) => v.length > 0 || 'Required']" />
++ <PlTextField :validate="(v) => v.length === 0 ? 'Required' : undefined" />
+```
+
+### `clearable` now accepts a factory function
+
+If you need a custom reset value (e.g. `undefined` instead of `""`), pass a function:
+
+```vue
+<PlTextField :clearable="() => undefined" />
+```
+
+Boolean `true` still resets to `""` as before.
+
+---
+
+## PlNumberField
+
+### `useIncrementButtons` → `disableSteps`
+
+The prop was renamed and its logic inverted.
+
+```diff
+- <PlNumberField :use-increment-buttons="false" />
++ <PlNumberField disable-steps />
+```
+
+### `updateOnEnterOrClickOutside` removed
+
+This behavior is now the default and only mode — value is always committed on blur or Enter. Remove the prop.
+
+```diff
+- <PlNumberField :update-on-enter-or-click-outside="true" />
++ <PlNumberField />
+```
+
+### `clearable` prop added
+
+Works the same as in `PlTextField` — pass `true` to show a clear button (resets to `undefined`), or a function for a custom reset value.
+
+### New events: `blur`, `focus`, `enter`
+
+The component now emits `blur`, `focus`, and `enter` events with the parsed model value (`number | undefined`), not the raw DOM event.
+
+```vue
+<PlNumberField v-model="num" @blur="(v) => console.log('committed:', v)" />
+```
+
+### Validation signature unchanged
+
+`:validate` still expects `(v: number) => string | undefined`.
+
+---
+
+## Validation functions (general)
+
+All validation functions across the codebase now return `string | undefined` instead of `boolean | string`.
+
+```diff
+- function validate(v: string): boolean | string {
+-   if (!v) return 'Required';
+-   return true;
+- }
++ function validate(v: string): string | undefined {
++   if (!v) return 'Required';
++   return undefined;
++ }
+```