Fix/checkbox validation error position (#521)

* fix: checkbox validation error positioning

* feat: sanitize defaultValue to false when field is required

demo/collections/RelationshipB.ts

@@ -20,6 +20,7 @@ const RelationshipB: CollectionConfig = {
     {
       name: 'disableRelation', // used on RelationshipA.filterRelationship field
       type: 'checkbox',
+      required: true,
       admin: {
         position: 'sidebar',
       },

docs/fields/checkbox.mdx

@@ -22,7 +22,7 @@ keywords: checkbox, fields, config, configuration, documentation, Content Manage
 | **`hooks`**          | Provide field-based hooks to control logic for this field. [More](/docs/fields/overview#field-level-hooks) |
 | **`access`**         | Provide field-based access control to denote what users can see and do with this field's data. [More](/docs/fields/overview#field-level-access-control) |
 | **`hidden`**         | Restrict this field's visibility from all APIs entirely. Will still be saved to the database, but will not appear in any API or the Admin panel. |
-| **`defaultValue`**   | Provide data to be used for this field's default value. |
+| **`defaultValue`**   | Provide data to be used for this field's default value, will default to false if field is also `required`. |
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. |
 | **`required`**       | Require this field to have a value. |
 | **`admin`**          | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details. |

src/admin/components/forms/field-types/Checkbox/index.scss

@@ -6,6 +6,9 @@
 
   .tooltip {
     right: auto;
+    position: relative;
+    margin-bottom: .2em;
+    max-width: fit-content;
   }
 
   &__error-wrap {

src/fields/config/sanitize.ts

@@ -18,6 +18,10 @@ const sanitizeFields = (fields, validRelationships: string[]) => {
       field.label = toWords(field.name);
     }
 
+    if (field.type === 'checkbox' && typeof field.defaulValue === 'undefined' && field.required === true) {
+      field.defaultValue = false;
+    }
+
     if (field.type === 'relationship') {
       const relationships = Array.isArray(field.relationTo) ? field.relationTo : [field.relationTo];
       relationships.forEach((relationship: string) => {

src/index.ts

@@ -3,7 +3,8 @@ import pino from 'pino';
 import crypto from 'crypto';
 import {
   TypeWithID,
-  Collection, CollectionModel,
+  Collection,
+  CollectionModel,
 } from './collections/config/types';
 import {
   SanitizedConfig,