diff --git a/x-pack/plugins/observability/public/components/burn_rate_rule_editor/budget_consumed.tsx b/x-pack/plugins/observability/public/components/burn_rate_rule_editor/budget_consumed.tsx
index 85806a8b8d4f5..005cefec1e30f 100644
--- a/x-pack/plugins/observability/public/components/burn_rate_rule_editor/budget_consumed.tsx
+++ b/x-pack/plugins/observability/public/components/burn_rate_rule_editor/budget_consumed.tsx
@@ -8,7 +8,6 @@
 import { EuiFieldNumber, EuiFormRow, EuiIconTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { ChangeEvent, useState } from 'react';
-import numeral from '@elastic/numeral';
 
 interface Props {
   initialBurnRate?: number;
@@ -28,6 +27,7 @@ export function BudgetConsumed({
   const [budgetConsumed, setBudgetConsumed] = useState<number>(
     ((initialBurnRate * longLookbackWindowInHours) / sloTimeWindowInHours) * 100
   );
+  const [formattedValue, setFormattedValue] = useState<string>(budgetConsumed.toFixed(2));
   const hasError = errors !== undefined && errors.length > 0;
 
   const onBudgetConsumedChanged = (event: ChangeEvent<HTMLInputElement>) => {
@@ -60,8 +60,15 @@ export function BudgetConsumed({
         step={0.01}
         min={0.01}
         max={100}
-        value={numeral(budgetConsumed).format('0[.0]')}
-        onChange={(event) => onBudgetConsumedChanged(event)}
+        value={formattedValue}
+        onChange={(event) => {
+          onBudgetConsumedChanged(event);
+          setFormattedValue(event.target.value);
+        }}
+        onBlur={(event) => {
+          const value = event.target.value;
+          setFormattedValue(Number(value).toFixed(2));
+        }}
         data-test-subj="budgetConsumed"
       />
     </EuiFormRow>
diff --git a/x-pack/plugins/observability/public/components/burn_rate_rule_editor/burn_rate.tsx b/x-pack/plugins/observability/public/components/burn_rate_rule_editor/burn_rate.tsx
index ac7b92950fc96..1e76ddec456e2 100644
--- a/x-pack/plugins/observability/public/components/burn_rate_rule_editor/burn_rate.tsx
+++ b/x-pack/plugins/observability/public/components/burn_rate_rule_editor/burn_rate.tsx
@@ -8,7 +8,6 @@
 import { EuiFieldNumber, EuiFormRow, EuiIconTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { ChangeEvent, useState } from 'react';
-import numeral from '@elastic/numeral';
 
 interface Props {
   initialBurnRate?: number;
@@ -20,6 +19,7 @@ interface Props {
 export function BurnRate({ onChange, initialBurnRate = 1, maxBurnRate, errors }: Props) {
   const [burnRate, setBurnRate] = useState<number>(initialBurnRate);
   const hasError = errors !== undefined && errors.length > 0;
+  const [formattedValue, setFormattedValue] = useState<string>(burnRate.toFixed(2));
 
   const onBurnRateChange = (event: ChangeEvent<HTMLInputElement>) => {
     const value = Number(event.target.value);
@@ -51,8 +51,15 @@ export function BurnRate({ onChange, initialBurnRate = 1, maxBurnRate, errors }:
         step={0.01}
         min={0.01}
         max={maxBurnRate}
-        value={numeral(burnRate).format('0[.0]')}
-        onChange={(event) => onBurnRateChange(event)}
+        value={formattedValue}
+        onChange={(event) => {
+          onBurnRateChange(event);
+          setFormattedValue(event.target.value);
+        }}
+        onBlur={(event) => {
+          const value = event.target.value;
+          setFormattedValue(Number(value).toFixed(2));
+        }}
         data-test-subj="burnRate"
       />
     </EuiFormRow>