diff --git a/admin/app/components/solidus_admin/ui/forms/input/component.rb b/admin/app/components/solidus_admin/ui/forms/input/component.rb
index 4c6bb2bad05..53ac3ae9a91 100644
--- a/admin/app/components/solidus_admin/ui/forms/input/component.rb
+++ b/admin/app/components/solidus_admin/ui/forms/input/component.rb
@@ -71,6 +71,8 @@ def initialize(tag: :input, size: :m, error: nil, **attributes)
         disabled:bg-gray-50 disabled:text-gray-500 disabled:placeholder:text-gray-300 disabled:cursor-not-allowed
         invalid:border-red-400 invalid:hover:border-red-400 invalid:text-red-400
         aria-invalid:border-red-400 aria-invalid:hover:border-red-400 aria-invalid:text-red-400
+        read-only:bg-gray-15 focus:read-only:bg-gray-15 focus:read-only:ring-0 read-only:cursor-not-allowed
+        read-only:focus:border-gray-300 read-only:hover:border-gray-300 read-only:hover:focus:border-gray-300
       ],
       SIZES[size],
       specialized_classes,
diff --git a/admin/spec/components/previews/solidus_admin/ui/forms/input/component_preview/overview.html.erb b/admin/spec/components/previews/solidus_admin/ui/forms/input/component_preview/overview.html.erb
index 33a55354b1d..5684fa782c8 100644
--- a/admin/spec/components/previews/solidus_admin/ui/forms/input/component_preview/overview.html.erb
+++ b/admin/spec/components/previews/solidus_admin/ui/forms/input/component_preview/overview.html.erb
@@ -25,4 +25,9 @@
     <h6 class="text-gray-500 mb-3 mt-0">Disabled filled</h6>
     <%= render current_component.new(value: "My value", disabled: true) %>
   </div>
+
+  <div class="mb-8">
+    <h6 class="text-gray-500 mb-3 mt-0">Readonly</h6>
+    <%= render current_component.new(value: "My value", readonly: true) %>
+  </div>
 </section>