@fogpipe/forma-react 0.8.2 → 0.10.0

package/src/FormRenderer.tsx

@@ -74,7 +74,7 @@ function DefaultLayout({ children, onSubmit, isSubmitting }: LayoutProps) {
 /**
  * Default field wrapper component with accessibility support
  */
-function DefaultFieldWrapper({ fieldPath, field, children, errors, required, visible }: FieldWrapperProps) {
+function DefaultFieldWrapper({ fieldPath, field, children, errors, showRequiredIndicator, visible }: FieldWrapperProps) {
   if (!visible) return null;
 
   const errorId = `${fieldPath}-error`;
@@ -86,8 +86,8 @@ function DefaultFieldWrapper({ fieldPath, field, children, errors, required, vis
       {field.label && (
         <label htmlFor={fieldPath}>
           {field.label}
-          {required && <span className="required" aria-hidden="true">*</span>}
-          {required && <span className="sr-only"> (required)</span>}
+          {showRequiredIndicator && <span className="required" aria-hidden="true">*</span>}
+          {showRequiredIndicator && <span className="sr-only"> (required)</span>}
         </label>
       )}
       {children}
@@ -274,6 +274,13 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
       // Get schema property for additional constraints
       const schemaProperty = spec.schema.properties[fieldPath];
 
+      // Boolean fields: hide asterisk unless they have validation rules (consent pattern)
+      // - Binary question ("Do you smoke?"): no validation → false is valid → hide asterisk
+      // - Consent checkbox ("I accept terms"): has validation rule → show asterisk
+      const isBooleanField = schemaProperty?.type === "boolean" || fieldDef?.type === "boolean";
+      const hasValidationRules = (fieldDef?.validations?.length ?? 0) > 0;
+      const showRequiredIndicator = required && (!isBooleanField || hasValidationRules);
+
       // Base field props
       const baseProps: BaseFieldProps = {
         name: fieldPath,
@@ -429,6 +436,7 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
           errors={errors}
           touched={touched}
           required={required}
+          showRequiredIndicator={showRequiredIndicator}
           visible={isVisible}
         >
           {React.createElement(Component as React.ComponentType<typeof componentProps>, componentProps)}

package/src/__tests__/canProceed.test.ts

@@ -249,10 +249,12 @@ describe("canProceed", () => {
       expect(result.current.wizard?.canProceed).toBe(true);
     });
 
-    it("required boolean fields - undefined vs false", () => {
-      // Note: For boolean fields, "required" means "must have a value" (true or false),
-      // NOT "must be true". This is consistent with other field types where required
-      // means "not empty". For checkboxes that must be checked (like "Accept Terms"),
+    it("required boolean fields - auto-initialized to false", () => {
+      // Boolean fields are auto-initialized to false, which is a valid value.
+      // This provides better UX - the form is valid from the start since
+      // false is a valid answer to "Do you have pets?"
+      //
+      // For checkboxes that must be checked (like "Accept Terms"),
       // use a validation rule: { rule: "value = true", message: "Must accept terms" }
       const spec = createTestSpec({
         fields: {
@@ -263,13 +265,14 @@ describe("canProceed", () => {
         ],
       });
 
-      // undefined should be invalid (user hasn't answered)
-      const { result: resultUndefined } = renderHook(() =>
+      // With auto-initialization, boolean defaults to false (a valid value)
+      const { result: resultDefault } = renderHook(() =>
         useForma({ spec, initialData: {} })
       );
-      expect(resultUndefined.current.wizard?.canProceed).toBe(false);
+      expect(resultDefault.current.data.hasPets).toBe(false);
+      expect(resultDefault.current.wizard?.canProceed).toBe(true); // false is valid
 
-      // false should be valid (user answered "no")
+      // explicit false should be valid (user answered "no")
       const { result: resultFalse } = renderHook(() =>
         useForma({ spec, initialData: { hasPets: false } })
       );