From 560e0c654a155a50f96109520ac989dc0317fac2 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <leopoldthecuber@gmail.com>
Date: Mon, 5 Aug 2024 11:23:01 +0800
Subject: [PATCH] fix(forms): required indicator style

---
 .../core/forms/src/components/FormGroup.vue   | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/core/forms/src/components/FormGroup.vue b/packages/core/forms/src/components/FormGroup.vue
index c8e4bd4498..c31ea561e8 100644
--- a/packages/core/forms/src/components/FormGroup.vue
+++ b/packages/core/forms/src/components/FormGroup.vue
@@ -232,15 +232,19 @@ $errorColor: #f00;
     }
   }
 
-  &.required {
-    > label:after {
-      color: red;
-      content: "*";
-      font-size: 14px;
-      font-weight: normal;
-      // position: absolute;
-      padding-left: 3px;
-    }
+  &.required > label:before {
+    background-color: $kui-color-background-danger;
+    border-radius: $kui-border-radius-circle;
+    content: "";
+    height: 6px;
+    margin-right: $kui-space-40;
+    width: 6px;
+  }
+
+  // hide the required indicator for checkboxes
+  // because it may be misleading that the checkbox must be checked
+  &.field-checkbox.required > label:before {
+    display: none;
   }
 
   &.disabled {