1 files changed, 27 insertions, 0 deletions
diff --git a/web/source/settings/components/form/inputs.tsx b/web/source/settings/components/form/inputs.tsx
index 06075ea87..498499db6 100644
--- a/web/source/settings/components/form/inputs.tsx
+++ b/web/source/settings/components/form/inputs.tsx
@@ -26,6 +26,7 @@ import type {
 
 import type {
 	FileFormInputHook,
+	NumberFormInputHook,
 	RadioFormInputHook,
 	TextFormInputHook,
 } from "../../lib/form/types";
@@ -57,6 +58,32 @@ export function TextInput({label, field, ...props}: TextInputProps) {
 	);
 }
 
+export interface NumberInputProps extends React.DetailedHTMLProps<
+	React.InputHTMLAttributes<HTMLInputElement>,
+	HTMLInputElement
+> {
+	label?: ReactNode;
+	field: NumberFormInputHook;
+}
+
+export function NumberInput({label, field, ...props}: NumberInputProps) {
+	const { onChange, value, ref } = field;
+
+	return (
+		<div className={`form-field number${field.valid ? "" : " invalid"}`}>
+			<label>
+				{label}
+				<input
+					onChange={onChange}
+					value={value}
+					ref={ref as RefObject<HTMLInputElement>}
+					{...props}
+				/>
+			</label>
+		</div>
+	);
+}
+
 export interface TextAreaProps extends React.DetailedHTMLProps<
 	React.TextareaHTMLAttributes<HTMLTextAreaElement>,
 	HTMLTextAreaElement