Errors helper and field error proc

app/assets/stylesheets/application.css

@@ -33,3 +33,24 @@ site-sidebar {
         list-style: none;
     }
 }
+
+:root {
+    --error-color: rgb(155, 35, 24); /* Pico color red 650 */
+}
+
+form {
+    .field-with-errors {
+        input, select, textarea {
+            border-color: var(--error-color);
+
+            &:has(+ .error-text) {
+                margin-bottom: 0;
+            }
+        }
+
+        .error-text {
+            color: var(--error-color);
+            margin-bottom: var(--pico-spacing);
+        }
+    }
+}

app/helpers/errors_helper.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module ErrorsHelper
+  # Rendering an error inside the field
+  #
+  # @param html_tag [ActiveSupport::SafeBuffer]
+  # @param instance [ActionView::Helpers::Tags::Base]
+  def field_error_helper(html_tag, instance)
+    return html_tag if instance.is_a?(ActionView::Helpers::Tags::Label) # Don't wrap labels
+
+    error_messages = instance.error_message
+    content_tag(:div, html_tag + content_tag(:div, error_messages.join('; '), class: 'error-text'),
+                class: 'field-with-errors')
+  end
+end

config/application.rb

@@ -43,5 +43,10 @@ module SubtleStorm
       g.system_tests nil
       g.template_engine :slim
     end
+
+    # Field error proc
+    config.action_view.field_error_proc = proc do |html_tag, instance|
+      field_error_helper(html_tag, instance)
+    end
   end
 end