changes

app/templates/transactions/widgets/income_expense_toggle_buttons.html

@@ -1,16 +1,28 @@
 {% load crispy_forms_field %}
 
-<div class="btn-group w-100 mb-3" role="group" aria-label="{{ field.label }}">
-    {% for choice in field.field.choices %}
-        <input type="radio"
-               class="btn-check"
-               name="{{ field.html_name }}"
-               id="{{ field.html_name }}_{{ forloop.counter }}"
-               value="{{ choice.0 }}"
-               {% if choice.0 == field.value %}checked{% endif %}>
-        <label class="btn {% if forloop.first %}btn-outline-success{% elif forloop.last %}btn-outline-danger{% else %}btn-outline-primary{% endif %}"
-               for="{{ field.html_name }}_{{ forloop.counter }}">
-            {{ choice.1 }}
-        </label>
-    {% endfor %}
+<div class="form-group mb-3">
+    <div class="btn-group w-100" role="group" aria-label="{{ field.label }}">
+        {% for choice in field.field.choices %}
+            <input type="radio"
+                   class="btn-check"
+                   name="{{ field.html_name }}"
+                   id="{{ field.html_name }}_{{ forloop.counter }}_tr"
+                   value="{{ choice.0 }}"
+                   {% if choice.0 == field.value %}checked{% endif %}>
+            <label class="btn {% if forloop.first %}btn-outline-success{% elif forloop.last %}btn-outline-danger{% else %}btn-outline-primary{% endif %} {% if field.errors %}is-invalid{% endif %}"
+                   for="{{ field.html_name }}_{{ forloop.counter }}_tr">
+                {{ choice.1 }}
+            </label>
+        {% endfor %}
+    </div>
+    {% if field.errors %}
+        <div class="invalid-feedback d-block">
+            {% for error in field.errors %}
+                {{ error }}
+            {% endfor %}
+        </div>
+    {% endif %}
+    {% if field.help_text %}
+        <small class="form-text text-muted">{{ field.help_text }}</small>
+    {% endif %}
 </div>

app/templates/transactions/widgets/transaction_type_filter_buttons.html

@@ -0,0 +1,23 @@
+{% load crispy_forms_field %}
+
+<div class="btn-group w-100 mb-3"
+     role="group"
+     aria-label="{{ field.label }}"
+     _="on click
+        if no <input[type='checkbox']:checked/> in me
+          set nextCheckbox to the next <input[type='checkbox']/> from event.target within me with wrapping
+          call nextCheckbox.click()
+        end">
+    {% for choice in field.field.choices %}
+        <input type="checkbox"
+               class="btn-check"
+               name="{{ field.html_name }}"
+               id="{{ field.html_name }}_{{ forloop.counter }}"
+               value="{{ choice.0 }}"
+               {% if choice.0 in field.value %}checked{% endif %}>
+        <label class="btn btn-outline-dark"
+               for="{{ field.html_name }}_{{ forloop.counter }}">
+            {{ choice.1 }}
+        </label>
+    {% endfor %}
+</div>