fix: top-align checkbox and radio indicators with multi-line labels (#539)

Author: pedromenezes1

.changeset/top-align-checkbox-radio-indicators.md

@@ -0,0 +1,7 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Fixed vertical alignment of checkbox and radio indicators with multi-line labels.
+
+When label text wrapped to multiple lines, the indicators were vertically centered against the entire text block. They now align to the top, sitting next to the first line of text.

packages/kumo/src/components/checkbox/checkbox.tsx

@@ -261,7 +261,8 @@ const CheckboxBase = forwardRef<HTMLButtonElement, CheckboxProps>(
         disabled={disabled}
         onCheckedChange={onCheckedChange}
         className={cn(
-          "relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring focus:outline-none after:absolute after:-inset-x-3 after:-inset-y-2",
+          "relative flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border-0 bg-kumo-base ring focus:outline-none after:absolute after:-inset-x-3 after:-inset-y-2",
+          label && "mt-0.5",
           variant === "error" ? "ring-kumo-danger" : "ring-kumo-hairline",
           !disabled &&
             "hover:ring-kumo-hairline focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand",
@@ -298,7 +299,7 @@ const CheckboxBase = forwardRef<HTMLButtonElement, CheckboxProps>(
       <FieldBase.Root className="inline-flex">
         <FieldBase.Label
           className={cn(
-            "!m-0 !min-h-0 !text-base inline-flex items-center gap-2",
+            "!m-0 !min-h-0 !text-base inline-flex items-start gap-2",
             controlFirst ? "flex-row" : "flex-row-reverse justify-end",
             disabled ? "cursor-not-allowed" : "cursor-pointer",
           )}
@@ -340,7 +341,7 @@ const CheckboxItem = forwardRef<HTMLButtonElement, CheckboxItemProps>(
     return (
       <label
         className={cn(
-          "m-0 relative inline-flex items-center gap-2",
+          "m-0 relative inline-flex items-start gap-2",
           // Control first (default): checkbox before label
           // Label first: label before checkbox using flex-row-reverse
           !controlFirst && "flex-row-reverse justify-end",
@@ -357,7 +358,7 @@ const CheckboxItem = forwardRef<HTMLButtonElement, CheckboxItemProps>(
           disabled={disabled}
           onCheckedChange={onCheckedChange}
           className={cn(
-            "peer relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2",
+            "peer relative mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2",
             variant === "error" ? "ring-kumo-danger" : "ring-kumo-hairline",
             !disabled &&
               "group-hover:ring-kumo-hairline hover:ring-kumo-hairline focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand",

packages/kumo/src/components/radio/radio.tsx

@@ -319,7 +319,7 @@ const RadioItem = forwardRef<HTMLButtonElement, RadioItemProps>(
     return (
       <label
         className={cn(
-          "m-0 group relative inline-flex items-center gap-2",
+          "m-0 group relative inline-flex items-start gap-2",
           // "start" (default): radio before label
           // "end": label before radio using flex-row-reverse
           effectiveControlPosition === "end" && "flex-row-reverse justify-end",
@@ -332,7 +332,7 @@ const RadioItem = forwardRef<HTMLButtonElement, RadioItemProps>(
           value={value}
           disabled={disabled}
           className={cn(
-            "relative flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-0 bg-kumo-base ring focus:outline-none after:absolute after:-inset-x-3 after:-inset-y-2",
+            "relative mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-0 bg-kumo-base ring focus:outline-none after:absolute after:-inset-x-3 after:-inset-y-2",
             variant === "error" ? "ring-kumo-danger" : "ring-kumo-line",
             !disabled &&
               variant !== "error" &&