From c1e6d0523e2f499f40d7c7d209e79ca741cb3ba4 Mon Sep 17 00:00:00 2001
From: Matt Rothenberg <mrothenberg@cloudflare.com>
Date: Tue, 27 Oct 2026 22:07:30 -0400
Subject: [PATCH 1/2] fix(field): don't render an empty label element

---
 .changeset/field-empty-label.md               |  5 +++
 .../kumo/src/components/field/field.test.tsx  | 42 +++++++++++++++++++
 packages/kumo/src/components/field/field.tsx  |  8 +++-
 .../kumo/src/components/input/input.test.tsx  | 19 +++++++++
 .../components/tag-input/tag-input.test.tsx   | 13 ++++++
 .../src/components/tag-input/tag-input.tsx    |  2 +-
 6 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/field-empty-label.md

diff --git a/.changeset/field-empty-label.md b/.changeset/field-empty-label.md
new file mode 100644
index 0000000000..6d131cbab2
--- /dev/null
+++ b/.changeset/field-empty-label.md
@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+`Field` no longer renders an empty `<label>` when it has no label, tooltip or optional indicator. This fixes `Input`, `InputArea` and `TagInput` without a `label` but with a description or error: they no longer show an empty row above the control, and their `aria-label` is no longer replaced by an empty accessible name.
diff --git a/packages/kumo/src/components/field/field.test.tsx b/packages/kumo/src/components/field/field.test.tsx
index ebf339331b..a4fa822fab 100644
--- a/packages/kumo/src/components/field/field.test.tsx
+++ b/packages/kumo/src/components/field/field.test.tsx
@@ -25,4 +25,46 @@ describe("Field", () => {
       screen.getByRole("button", { name: "Mais informações" }),
     ).toBeTruthy();
   });
+
+  it.each([
+    ["undefined", undefined],
+    ["null", null],
+    ["false", false],
+    ["an empty string", ""],
+  ])("renders no label element when label is %s", (_, label) => {
+    const { container } = render(
+      <Field label={label} description="Help text">
+        <input aria-label="Name" />
+      </Field>,
+    );
+
+    expect(container.querySelector("label")).toBeNull();
+    expect(screen.getByText("Help text")).toBeTruthy();
+    expect(screen.getByRole("textbox", { name: "Name" })).toBeTruthy();
+  });
+
+  it.each([
+    ["text", "Name", {}],
+    ["the number 0", 0, {}],
+    ["only an optional indicator", undefined, { required: false }],
+    ["only a tooltip", undefined, { labelTooltip: "More" }],
+  ])("keeps the label element for %s", (_, label, props) => {
+    const { container } = render(
+      <Field label={label} {...props}>
+        <input />
+      </Field>,
+    );
+
+    expect(container.querySelector("label")).not.toBeNull();
+  });
+
+  it("still hides the label element with hideLabel", () => {
+    const { container } = render(
+      <Field label="Name" hideLabel>
+        <input />
+      </Field>,
+    );
+
+    expect(container.querySelector("label")).toBeNull();
+  });
 });
diff --git a/packages/kumo/src/components/field/field.tsx b/packages/kumo/src/components/field/field.tsx
index 5e33f7ccab..0d125f50b6 100644
--- a/packages/kumo/src/components/field/field.tsx
+++ b/packages/kumo/src/components/field/field.tsx
@@ -143,10 +143,16 @@ export function Field({
 }: FieldProps) {
   // Show "(optional)" when required is explicitly false
   const showOptional = required === false;
+  // An empty <label> still takes a grid row and, through aria-labelledby,
+  // overrides the control's own aria-label with an empty name.
+  const hasLabelContent =
+    (label != null && label !== false && label !== "") ||
+    showOptional ||
+    labelTooltip != null;
 
   return (
     <FieldBase.Root className={fieldVariants({ controlFirst })}>
-      {!hideLabel && (
+      {!hideLabel && hasLabelContent && (
         <FieldBase.Label className="m-0 text-base font-medium text-kumo-default select-none">
           <Label showOptional={showOptional} tooltip={labelTooltip} asContent>
             {label}
diff --git a/packages/kumo/src/components/input/input.test.tsx b/packages/kumo/src/components/input/input.test.tsx
index 0662b6cd5d..c2570a34ea 100644
--- a/packages/kumo/src/components/input/input.test.tsx
+++ b/packages/kumo/src/components/input/input.test.tsx
@@ -400,4 +400,23 @@ describe("InputArea", () => {
     render(<InputArea ref={ref} aria-label="Notes" autoResize />);
     expect(ref.current).toBeInstanceOf(HTMLTextAreaElement);
   });
+
+  it.each([
+    ["description", { description: "Help text" }],
+    ["error", { error: "Required" }],
+  ])("keeps its aria-label as the name with only a %s", (_, props) => {
+    const { container } = render(<Input aria-label="Name" {...props} />);
+
+    expect(container.querySelector("label")).toBeNull();
+    expect(screen.getByRole("textbox", { name: "Name" })).toBeTruthy();
+  });
+
+  it("keeps the InputArea aria-label as the name with only a description", () => {
+    const { container } = render(
+      <InputArea aria-label="Notes" description="Help text" />,
+    );
+
+    expect(container.querySelector("label")).toBeNull();
+    expect(screen.getByRole("textbox", { name: "Notes" })).toBeTruthy();
+  });
 });
diff --git a/packages/kumo/src/components/tag-input/tag-input.test.tsx b/packages/kumo/src/components/tag-input/tag-input.test.tsx
index 293a10c468..4971257bbc 100644
--- a/packages/kumo/src/components/tag-input/tag-input.test.tsx
+++ b/packages/kumo/src/components/tag-input/tag-input.test.tsx
@@ -199,6 +199,19 @@ describe("TagInput", () => {
     expect(screen.getByText("Tags").closest("label")?.htmlFor).toBe(input.id);
   });
 
+  it("does not render an empty label when only feedback is shown", () => {
+    const { container } = render(
+      <TagInput aria-label="Tags" validateValue={() => false} />,
+    );
+    fireEvent.change(screen.getByLabelText("Tags"), {
+      target: { value: "bad" },
+    });
+    fireEvent.keyDown(screen.getByLabelText("Tags"), { key: "Enter" });
+    expect(screen.getByText('"bad" is not valid.')).toBeTruthy();
+    expect(container.querySelector("label")).toBeNull();
+    expect(screen.getByRole("textbox", { name: "Tags" })).toBeTruthy();
+  });
+
   it("forwards its ref to the input", () => {
     const ref = createRef<HTMLInputElement>();
     render(<TagInput ref={ref} aria-label="Tags" />);
diff --git a/packages/kumo/src/components/tag-input/tag-input.tsx b/packages/kumo/src/components/tag-input/tag-input.tsx
index 18910e51c8..1cbeadfb89 100644
--- a/packages/kumo/src/components/tag-input/tag-input.tsx
+++ b/packages/kumo/src/components/tag-input/tag-input.tsx
@@ -284,7 +284,7 @@ export const TagInput = forwardRef<HTMLInputElement, TagInputProps>(
     if (hasField) {
       return (
         <Field
-          label={label ?? ""}
+          label={label}
           labelTooltip={labelTooltip}
           description={description}
           error={fieldError}

From 3efdb9f429a5f61ceaceda8a2e084433216196dd Mon Sep 17 00:00:00 2001
From: Matt Rothenberg <mrothenberg@cloudflare.com>
Date: Wed, 28 Oct 2026 08:35:02 -0400
Subject: [PATCH 2/2] fix(field): treat every value React renders as nothing as
 an empty label

---
 .changeset/field-empty-label.md                   |  2 +-
 packages/kumo/src/components/field/field.test.tsx | 11 +++++++++++
 packages/kumo/src/components/field/field.tsx      |  9 ++++++---
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/.changeset/field-empty-label.md b/.changeset/field-empty-label.md
index 6d131cbab2..a561a98177 100644
--- a/.changeset/field-empty-label.md
+++ b/.changeset/field-empty-label.md
@@ -2,4 +2,4 @@
 "@cloudflare/kumo": patch
 ---
 
-`Field` no longer renders an empty `<label>` when it has no label, tooltip or optional indicator. This fixes `Input`, `InputArea` and `TagInput` without a `label` but with a description or error: they no longer show an empty row above the control, and their `aria-label` is no longer replaced by an empty accessible name.
+`Field` no longer renders a `<label>` when it would be empty: when `label` and `labelTooltip` are each `undefined`, `null`, a boolean or `""`, and there is no "(optional)" indicator. This fixes `Input`, `InputArea` and `TagInput` without a `label` but with a description or error: they no longer show an empty row above the control, and their `aria-label` is no longer replaced by an empty accessible name.
diff --git a/packages/kumo/src/components/field/field.test.tsx b/packages/kumo/src/components/field/field.test.tsx
index a4fa822fab..3f75df47ab 100644
--- a/packages/kumo/src/components/field/field.test.tsx
+++ b/packages/kumo/src/components/field/field.test.tsx
@@ -29,6 +29,7 @@ describe("Field", () => {
   it.each([
     ["undefined", undefined],
     ["null", null],
+    ["true", true],
     ["false", false],
     ["an empty string", ""],
   ])("renders no label element when label is %s", (_, label) => {
@@ -58,6 +59,16 @@ describe("Field", () => {
     expect(container.querySelector("label")).not.toBeNull();
   });
 
+  it("renders no label element for an empty tooltip", () => {
+    const { container } = render(
+      <Field label={undefined} labelTooltip="">
+        <input />
+      </Field>,
+    );
+
+    expect(container.querySelector("label")).toBeNull();
+  });
+
   it("still hides the label element with hideLabel", () => {
     const { container } = render(
       <Field label="Name" hideLabel>
diff --git a/packages/kumo/src/components/field/field.tsx b/packages/kumo/src/components/field/field.tsx
index 0d125f50b6..24007f3bb6 100644
--- a/packages/kumo/src/components/field/field.tsx
+++ b/packages/kumo/src/components/field/field.tsx
@@ -120,6 +120,11 @@ export interface FieldProps extends KumoFieldVariantsProps {
   hideLabel?: boolean;
 }
 
+/** Values React renders as nothing. */
+function rendersNothing(node: ReactNode) {
+  return node == null || typeof node === "boolean" || node === "";
+}
+
 /**
  * Form field wrapper that provides a label, optional description, and error display
  * around any form control. Built on Base UI Field primitives.
@@ -146,9 +151,7 @@ export function Field({
   // An empty <label> still takes a grid row and, through aria-labelledby,
   // overrides the control's own aria-label with an empty name.
   const hasLabelContent =
-    (label != null && label !== false && label !== "") ||
-    showOptional ||
-    labelTooltip != null;
+    !rendersNothing(label) || showOptional || !rendersNothing(labelTooltip);
 
   return (
     <FieldBase.Root className={fieldVariants({ controlFirst })}>