Fix checkbox disabled styling

2022-10-08 20:04:55 +10:30
parent de7c214148
commit 6596251122
1 changed files with 6 additions and 2 deletions
@@ -14,14 +14,18 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
            ref={ref}
            type="checkbox"
            className={`h-4 w-4 rounded border-transparent bg-orange-100 text-orange-500 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 ${
-              disabled ? "cursor-not-allowed text-orange-200" : ""
+              disabled ? "cursor-not-allowed bg-orange-50 text-orange-200" : ""
            }`}
            disabled={disabled}
            {...rest}
          />
        </div>
        <div className="ml-3 text-sm">
-          <label htmlFor="comments" className="font-medium text-gray-700">
+          <label
+            className={`font-medium  ${
+              disabled ? "text-gray-500" : "text-gray-700"
+            }`}
+          >
            {label}
          </label>
        </div>