src/servala/frontend/forms/widgets.py

@@ -2,6 +2,7 @@ import json
 
 from django import forms
 from django.core.exceptions import ValidationError
+from django.forms.widgets import NumberInput
 
 
 class DynamicArrayWidget(forms.Widget):
@@ -216,3 +217,21 @@ class DynamicArrayField(forms.JSONField):
                             raise ValidationError(
                                 f"Item {i + 1} must be one of: {', '.join(enum_values)}"
                             )
+
+
+class NumberInputWithAddon(NumberInput):
+    """
+    Widget for number input fields with a suffix add-on (e.g., "Gi", "MB").
+    Renders as a Bootstrap input-group with the suffix displayed as an add-on.
+    """
+
+    template_name = "frontend/forms/number_input_with_addon.html"
+
+    def __init__(self, addon_text="", attrs=None):
+        super().__init__(attrs)
+        self.addon_text = addon_text
+
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        context["widget"]["addon_text"] = self.addon_text
+        return context

src/servala/frontend/templates/frontend/forms/number_input_with_addon.html

@@ -0,0 +1,11 @@
+<div class="input-group">
+    <input type="{{ widget.type }}"
+           name="{{ widget.name }}"
+           {% if widget.value != None %}value="{{ widget.value }}"{% endif %}
+           {% if widget.attrs.id %}id="{{ widget.attrs.id }}"{% endif %}
+           {% for name, value in widget.attrs.items %} {% if value is not False and name != "id" %} {{ name }}{% if value is not True %}="{{ value }}"{% endif %}
+           {% endif %}
+           {% endfor %}
+           class="form-control{% if widget.attrs.class %} {{ widget.attrs.class }}{% endif %}" />
+    <span class="input-group-text">{{ widget.addon_text }}</span>
+</div>