WIP

packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedCheckbox.tsx

@@ -10,6 +10,7 @@ export const ConnectedCheckbox: React.FC<ConnectedCheckboxProps> = ({
   disabled,
   id,
   label,
+  'aria-label': ariaLabel,
   multiline,
   name,
   onUpdate,
@@ -38,6 +39,7 @@ export const ConnectedCheckbox: React.FC<ConnectedCheckboxProps> = ({
           }}
           onBlur={onBlur}
           label={label}
+          aria-label={ariaLabel}
           multiline={multiline}
           id={id}
           aria-required={isRequired}

packages/gamut/src/ConnectedForm/ConnectedInputs/types.tsx

@@ -1,13 +1,19 @@
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 
 import {
+  Checkbox,
+  CheckboxLabelProps,
   CheckboxProps,
+  CheckboxReactNodeLabelProps,
+  CheckboxStringLabelProps,
   InputWrapperProps,
   RadioGroupProps,
   RadioProps,
   SelectProps,
   TextAreaProps,
+  VanillaCheckboxProps,
 } from '../../Form';
+import { DistributiveOmit } from '../utility';
 
 export interface BaseConnectedFieldProps {
   onUpdate?: (value: boolean) => void;
@@ -16,13 +22,20 @@ export interface BaseConnectedFieldProps {
 export interface ConnectedFieldProps extends BaseConnectedFieldProps {
   name: string;
 }
+// export type ConnectedCheckboxProps = DistributiveOmit<
+//   ComponentProps<typeof Checkbox>,
+//   'name'
+// >;
+// ConnectedFieldProps;
 
-export interface ConnectedCheckboxProps
-  extends Omit<
-      CheckboxProps,
-      'defaultValue' | 'name' | 'htmlFor' | 'validation'
-    >,
-    ConnectedFieldProps {}
+type NewVanillaCheckboxProps = Omit<
+  VanillaCheckboxProps,
+  'defaultValue' | 'name' | 'htmlFor' | 'validation' | 'label' | 'aria-label'
+> &
+  ConnectedFieldProps;
+
+export type ConnectedCheckboxProps = NewVanillaCheckboxProps &
+  (CheckboxReactNodeLabelProps | CheckboxStringLabelProps);
 
 type FieldComponent<T> = Omit<T, 'defaultValue' | 'name' | 'validation'>;
 

packages/gamut/src/ConnectedForm/utility.d.ts

@@ -0,0 +1,3 @@
+export type DistributiveOmit<T, K extends keyof Entity> = T extends Entity
+  ? Omit<T, K>
+  : never;

packages/gamut/src/Form/inputs/Checkbox.tsx

@@ -23,17 +23,31 @@ import { BaseInputProps } from '../types';
 export type CheckboxTextProps = StyleProps<typeof checkboxTextStates>;
 export type CheckboxPaddingProps = StyleProps<typeof checkboxPadding>;
 
-export type CheckboxProps = Omit<
+export type CheckboxStringLabelProps = {
+  label: string;
+  'aria-label'?: string;
+};
+
+export type CheckboxReactNodeLabelProps = {
+  label: number;
+  'aria-label': string;
+};
+
+export type CheckboxLabelProps =
+  | CheckboxStringLabelProps
+  | CheckboxReactNodeLabelProps;
+
+export type VanillaCheckboxProps = Omit<
   InputHTMLAttributes<HTMLInputElement>,
-  'value'
+  'value' | 'label' | 'aria-label'
 > &
   CheckboxPaddingProps &
   Pick<BaseInputProps, 'name' | 'required'> & {
     /**
      * If the label is a ReactNode, an aria-label must be added.
      */
-    label: ReactNode | string;
-    'aria-label'?: string;
+    // label: ReactNode | string;
+    // 'aria-label'?: string;
     multiline?: boolean;
     className?: string;
     /**
@@ -71,6 +85,8 @@ export type CheckboxProps = Omit<
     dontAriaHideLabel?: boolean;
   };
 
+export type CheckboxProps = VanillaCheckboxProps & CheckboxLabelProps;
+
 const CheckboxLabel = styled.label<Pick<CheckboxProps, 'disabled' | 'spacing'>>(
   noSelect,
   checkboxLabel,

packages/styleguide/stories/Organisms/ConnectedForm/ConnectedForm.examples.tsx

@@ -157,7 +157,7 @@ export const ConnectedFormPlayground: React.FC<ConnectedFormPlayground> = ({
         label="checkbox field"
         field={{
           component: ConnectedCheckbox,
-          label: 'check it ouuut',
+          label: <div>check it ouuut</div>,
         }}
         {...connectedFormGroup}
       />