fix(ui): checkbox and radio error tooltip alignment (#16439)

Fixes error tooltip positioning for checkbox and radio fields so the
caret aligns properly with the input.

### Changes

**Checkbox field:**
- Move `Error` component inside `CheckboxInput` so tooltip can position
relative to the input wrapper
- Add `Error` prop to `CheckboxInputProps` interface
- Update positioning CSS to use absolute positioning with proper offset

**Radio field:**
- Wrap `Error` and `Label` in a div for proper tooltip positioning
- Add `alignCaret="left"` to `FieldError` for consistent tooltip
alignment

**Tooltip:**
- Adjust left caret position with proper spacing

### Other changes

- Add required, disabled, and readOnly field variants to v4 Radio test
collection

Author: JarrodMFlesch

packages/ui/src/elements/Tooltip/index.css

@@ -73,7 +73,7 @@
 
   .tooltip--caret-left {
     &::after {
-      left: 0;
+      left: var(--spacer-3);
     }
   }
 

packages/ui/src/fields/Checkbox/Input.tsx

@@ -13,6 +13,7 @@ export type CheckboxInputProps = {
   readonly BeforeInput?: React.ReactNode
   readonly checked?: boolean
   readonly className?: string
+  readonly Error?: React.ReactNode
   readonly id?: string
   readonly inputRef?: React.RefObject<HTMLInputElement | null>
   readonly Label?: React.ReactNode
@@ -34,6 +35,7 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = ({
   BeforeInput,
   checked,
   className,
+  Error,
   inputRef,
   Label,
   label,
@@ -88,6 +90,7 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = ({
           {!checked && partialChecked && <LineIcon />}
         </span>
         {AfterInput}
+        {Error}
       </div>
       <RenderCustomComponent
         CustomComponent={Label}

packages/ui/src/fields/Checkbox/index.css

@@ -4,7 +4,8 @@
 
     .tooltip:not([aria-hidden='true']) {
       right: auto;
-      position: static;
+      left: calc(-1 * var(--spacer-2));
+      position: absolute;
       transform: translateY(calc(var(--caret-size) * -1));
       margin-bottom: 0.2em;
       max-width: fit-content;

packages/ui/src/fields/Checkbox/index.tsx

@@ -106,16 +106,18 @@ const CheckboxFieldComponent: CheckboxFieldClientComponent = (props) => {
         .join(' ')}
       style={styles}
     >
-      <RenderCustomComponent
-        CustomComponent={Error}
-        Fallback={
-          <FieldError alignCaret={isRTL ? 'right' : 'left'} path={path} showError={showError} />
-        }
-      />
       <CheckboxInput
         AfterInput={AfterInput}
         BeforeInput={BeforeInput}
         checked={checked}
+        Error={
+          <RenderCustomComponent
+            CustomComponent={Error}
+            Fallback={
+              <FieldError alignCaret={isRTL ? 'right' : 'left'} path={path} showError={showError} />
+            }
+          />
+        }
         id={fieldID}
         inputRef={null}
         Label={Label}

packages/ui/src/fields/RadioGroup/index.tsx

@@ -81,16 +81,18 @@ const RadioGroupFieldComponent: RadioFieldClientComponent = (props) => {
         .join(' ')}
       style={styles}
     >
-      <RenderCustomComponent
-        CustomComponent={Error}
-        Fallback={<FieldError path={path} showError={showError} />}
-      />
-      <RenderCustomComponent
-        CustomComponent={Label}
-        Fallback={
-          <FieldLabel label={label} localized={localized} path={path} required={required} />
-        }
-      />
+      <div>
+        <RenderCustomComponent
+          CustomComponent={Error}
+          Fallback={<FieldError alignCaret="left" path={path} showError={showError} />}
+        />
+        <RenderCustomComponent
+          CustomComponent={Label}
+          Fallback={
+            <FieldLabel label={label} localized={localized} path={path} required={required} />
+          }
+        />
+      </div>
       <div className={`${fieldBaseClass}__wrap`}>
         {BeforeInput}
         <ul className={`${baseClass}--group`} id={`field-${path.replace(/\./g, '__')}`}>

test/v4/collections/Radio/index.ts

@@ -15,12 +15,95 @@ const RadioFields: CollectionConfig = {
         { label: 'Podcast', value: 'podcast' },
       ],
     },
+    {
+      name: 'contentTypeRequired',
+      type: 'radio',
+      label: 'Content Type (Required)',
+      required: true,
+      options: [
+        { label: 'Article', value: 'article' },
+        { label: 'Video', value: 'video' },
+        { label: 'Podcast', value: 'podcast' },
+      ],
+    },
+    {
+      name: 'contentTypeDisabled',
+      type: 'radio',
+      label: 'Content Type (Disabled)',
+      defaultValue: 'video',
+      admin: {
+        disabled: true,
+      },
+      options: [
+        { label: 'Article', value: 'article' },
+        { label: 'Video', value: 'video' },
+        { label: 'Podcast', value: 'podcast' },
+      ],
+    },
+    {
+      name: 'contentTypeReadOnly',
+      type: 'radio',
+      label: 'Content Type (Read Only)',
+      defaultValue: 'podcast',
+      admin: {
+        readOnly: true,
+      },
+      options: [
+        { label: 'Article', value: 'article' },
+        { label: 'Video', value: 'video' },
+        { label: 'Podcast', value: 'podcast' },
+      ],
+    },
     {
       name: 'contentTypeVertical',
       type: 'radio',
-      label: 'Content Type',
+      label: 'Content Type (Vertical)',
+      admin: {
+        layout: 'vertical',
+      },
+      options: [
+        { label: 'Article', value: 'article' },
+        { label: 'Video', value: 'video' },
+        { label: 'Podcast', value: 'podcast' },
+      ],
+    },
+    {
+      name: 'contentTypeVerticalRequired',
+      type: 'radio',
+      label: 'Content Type (Vertical, Required)',
+      required: true,
+      admin: {
+        layout: 'vertical',
+      },
+      options: [
+        { label: 'Article', value: 'article' },
+        { label: 'Video', value: 'video' },
+        { label: 'Podcast', value: 'podcast' },
+      ],
+    },
+    {
+      name: 'contentTypeVerticalDisabled',
+      type: 'radio',
+      label: 'Content Type (Vertical, Disabled)',
+      defaultValue: 'article',
+      admin: {
+        layout: 'vertical',
+        disabled: true,
+      },
+      options: [
+        { label: 'Article', value: 'article' },
+        { label: 'Video', value: 'video' },
+        { label: 'Podcast', value: 'podcast' },
+      ],
+    },
+    {
+      name: 'contentTypeVerticalReadOnly',
+      type: 'radio',
+      label: 'Content Type (Vertical, Read Only)',
+      defaultValue: 'video',
       admin: {
         layout: 'vertical',
+        readOnly: true,
       },
       options: [
         { label: 'Article', value: 'article' },