packages/ui: add checkbox label disabled

apps/web/app/ius/[slug]/page.tsx

@@ -23,12 +23,17 @@ export default async function Page(props: Props) {
             const Element = mapFieldTypeElement[fieldType];
 
             return (
-              <ElementContainer key={name} id={name} title={metaData[name].label}>
+              <ElementContainer
+                key={name}
+                id={name}
+                title={fieldType === 'CHECKBOX' ? '' : metaData[name].label}
+              >
                 <Element
                   id={name}
                   required={metaData[name].required}
                   defaultValue={data[name]}
                   disabled={metaData[name].disabled}
+                  title={metaData[name].label}
                 />
               </ElementContainer>
             );

packages/ui/checkbox.tsx

@@ -3,6 +3,28 @@ import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
 import { forwardRef } from 'react';
 
+const labelVariants = cva('ml-2 text-sm font-medium text-gray-900', {
+  defaultVariants: {
+    intent: 'default',
+  },
+  variants: {
+    intent: {
+      default: '',
+      disabled: 'cursor-not-allowed',
+    },
+  },
+});
+
+type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<typeof labelVariants>;
+
+const Label = forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, intent, title, ...props }, ref) => (
+    <label className={cn(labelVariants({ className, intent }))} ref={ref} {...props}>
+      {title}
+    </label>
+  )
+);
+
 const variants = cva(
   'w-4 h-4 focus:ring-transparent rounded-sm hover:border-primary-500 disabled:hover:border-gray-300 border-gray-300 text-sm text-primary outline-none transition-all ease-linear hover:transition-all focus:transition-all disabled:cursor-not-allowed disabled:text-opacity-30'
 );
@@ -15,9 +37,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     <div className="flex items-center">
       <input ref={ref} type="checkbox" className={cn(variants({ className }))} {...props} />
       {title && (
-        <label htmlFor={props.id} className="ml-2 text-sm font-normal text-gray-900">
-          {title}
-        </label>
+        <Label intent={props.disabled ? 'disabled' : 'default'} htmlFor={props.id} title={title} />
       )}
     </div>
   )