diff --git a/src/components/Input.js b/src/components/Input.js
index 1dcdd9e3..5fc7e6dd 100644
--- a/src/components/Input.js
+++ b/src/components/Input.js
@@ -6,7 +6,7 @@ import { mergeProps } from "../utils/component";
import Field from "./internal/Field";
import InternalInput from "./internal/InternalInput";
-const { TYPES, VARIANTS, COLORS, NUMERIC_REGEX } = InternalInput;
+const { TYPES, VARIANTS, COLORS, NUMERIC_REGEX, DECIMAL_REGEX } = InternalInput;
const DEFAULT_PROPS = {
type: InternalInput.DEFAULT_PROPS.type,
@@ -24,6 +24,10 @@ const DEFAULT_PROPS = {
return "Only 0-9 are allowed";
}
+ if (variant === "decimal" && DECIMAL_REGEX.test(value) === false) {
+ return "Invalid";
+ }
+
return null;
},
};
diff --git a/src/components/Input.test.js b/src/components/Input.test.js
index d11b0ddc..0cf18035 100644
--- a/src/components/Input.test.js
+++ b/src/components/Input.test.js
@@ -87,6 +87,16 @@ describe("Input", () => {
expect(input).toHaveAttribute("pattern", "[0-9]*");
});
+ it("decimal variant", () => {
+ render();
+
+ const input = screen.getByLabelText("Amount");
+
+ expect(input).toHaveAttribute("type", "text");
+ expect(input).toHaveAttribute("inputmode", "decimal");
+ expect(input).not.toHaveAttribute("pattern");
+ });
+
it("with numericPrefix", () => {
render(