fix(RequiredIndicator): display as asterisk instead of text

src/components/field/FlowbiteField.tsx

@@ -10,6 +10,7 @@ import { RenderProp } from "react-render-prop-type";
 
 import { FlowbiteStateColor, useFieldError } from "../../hooks";
 import { useAtomValue } from "jotai";
+import { RequiredIndicator } from "@/components";
 
 type Children = RenderProp<
   Omit<RequiredProps, "isFieldRequired"> & {
@@ -41,7 +42,8 @@ export const FlowbiteField = <Field extends ZodField<any, any>>({
     <div className="flex flex-col gap-2">
       {label && (
         <Label color={color} htmlFor={id}>
-          {label} {isFieldRequired ? "(required)" : ""}
+          <span>{label}</span>
+          {isFieldRequired ? <RequiredIndicator /> : ""}
         </Label>
       )}
       {children({ ...requiredProps, id, helperText, color })}

src/components/index.ts

@@ -5,6 +5,7 @@ export * from "./file-field";
 export * from "./number-field";
 export * from "./radio-field";
 export * from "./rating-field";
+export * from "./required-indicator";
 export * from "./select-field";
 export * from "./slider-field";
 export * from "./text-field";

src/components/radio-option/RadioOption.tsx

@@ -8,6 +8,7 @@ import { HelperText, Label, Radio } from "flowbite-react";
 
 import { useFieldError } from "../../hooks";
 import { useAtomValue } from "jotai";
+import { RequiredIndicator } from "@/components";
 
 export const RadioOption = <Field extends CheckboxField>({
   field,
@@ -27,7 +28,10 @@ export const RadioOption = <Field extends CheckboxField>({
       <Radio {...props} id={id} {...requiredProps} role="radio" />
       <div className="flex flex-col">
         <Label htmlFor={id} color={error ? "failure" : undefined}>
-          {label} {isFieldRequired ? "(required)" : ""}
+          <>
+            {label}
+            {isFieldRequired ? <RequiredIndicator /> : ""}
+          </>
         </Label>
         <HelperText
           className="mt-0 text-xs"

src/components/required-indicator/RequiredIndicator.tsx

@@ -0,0 +1,5 @@
+export const RequiredIndicator = () => (
+  <span role="presentation" aria-hidden="true" className="ms-1 text-red-500">
+    *
+  </span>
+);

src/components/required-indicator/index.ts

@@ -0,0 +1 @@
+export * from "./RequiredIndicator";