fix(input): render error and description without requiring label (#513)

Author: mattrothenberg

.changeset/fix-input-error-without-label.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+fix(input): render error and description props without requiring a label

packages/kumo-docs-astro/src/components/demos/InputDemo.tsx

@@ -66,6 +66,26 @@ export function InputBareDemo() {
   return <Input placeholder="Search..." aria-label="Search products" />;
 }
 
+/** Input without a visible label, showing error and description via `aria-label`. */
+export function InputErrorWithoutLabelDemo() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Input
+        aria-label="Hostname"
+        placeholder="example.com"
+        value="not a host"
+        error="Please enter a valid hostname"
+      />
+      <Input
+        aria-label="Path"
+        placeholder="/api/v1/users"
+        value="missing-slash"
+        error={{ message: "Path must start with /", match: true }}
+      />
+    </div>
+  );
+}
+
 export function InputTypesDemo() {
   return (
     <div className="flex flex-col gap-4">

packages/kumo-docs-astro/src/pages/components/input.mdx

@@ -18,6 +18,7 @@ import {
   InputSizesDemo,
   InputDisabledDemo,
   InputBareDemo,
+  InputErrorWithoutLabelDemo,
   InputTypesDemo,
   InputOptionalFieldDemo,
   InputLabelTooltipDemo,
@@ -196,6 +197,16 @@ export default function Example() {
   <InputBareDemo client:visible />
 </ComponentExample>
 
+### Error Without Label
+
+<p>
+  Error messages and descriptions render even without a visible `label` — use
+  `aria-label` to keep the input accessible.
+</p>
+<ComponentExample demo="InputErrorWithoutLabelDemo">
+  <InputErrorWithoutLabelDemo client:visible />
+</ComponentExample>
+
 ### Input Types
 
   <p>

packages/kumo/src/components/field/field.tsx

@@ -3,6 +3,20 @@ import type { ReactNode } from "react";
 import { cn } from "../../utils/cn";
 import { Label } from "../label";
 
+/**
+ * Normalizes an error prop that may be a string or structured object
+ * into the `{ message, match }` shape expected by `<Field>`.
+ *
+ * Returns `undefined` when the input is falsy.
+ */
+export function normalizeFieldError(
+  error: string | { message: ReactNode; match: FieldErrorMatch } | undefined,
+): { message: ReactNode; match: FieldErrorMatch } | undefined {
+  if (!error) return undefined;
+  if (typeof error === "string") return { message: error, match: true };
+  return error;
+}
+
 /** Field variant definitions (currently empty, reserved for future additions). */
 export const KUMO_FIELD_VARIANTS = {
   // Field currently has no variant options but structure is ready for future additions

packages/kumo/src/components/field/index.ts

@@ -1,5 +1,6 @@
 export {
   Field,
+  normalizeFieldError,
   type FieldProps,
   type FieldErrorMatch,
   fieldVariants,

packages/kumo/src/components/input/input-area.tsx

@@ -3,7 +3,7 @@ import { cn } from "../../utils/cn";
 import { useCallback, type ReactNode } from "react";
 import * as React from "react";
 import { Field as FieldBase } from "@base-ui/react/field";
-import { Field as KumoField, type FieldErrorMatch } from "../field/field";
+import { Field as KumoField, normalizeFieldError, type FieldErrorMatch } from "../field/field";
 
 export const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(
   (props, ref) => {
@@ -49,23 +49,17 @@ export const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(
       className,
     );
 
-    // Render with Field wrapper if label is provided
+    // Render with Field wrapper if label, error, or description is provided
     // Use FieldBase.Control with render callback to ensure proper label-textarea association.
     // The render callback receives props with the correct id/aria-labelledby from Field context.
-    if (label) {
+    if (label || error || description) {
       return (
         <KumoField
           label={label}
           required={required}
           labelTooltip={labelTooltip}
           description={description}
-          error={
-            error
-              ? typeof error === "string"
-                ? { message: error, match: true }
-                : error
-              : undefined
-          }
+          error={normalizeFieldError(error)}
         >
           <FieldBase.Control
             render={(controlProps) => (

packages/kumo/src/components/input/input.test.tsx

@@ -116,6 +116,34 @@ describe("Input", () => {
     expect(screen.getByText("Required field")).toBeTruthy();
   });
 
+  // Error without label
+  it("renders error message without label when error is a string", () => {
+    render(<Input aria-label="Email" error="Invalid email" />);
+    expect(screen.getByText("Invalid email")).toBeTruthy();
+  });
+
+  it("renders error message without label when error is an object", () => {
+    render(
+      <Input
+        aria-label="Email"
+        error={{ message: "Required field", match: true }}
+      />,
+    );
+    expect(screen.getByText("Required field")).toBeTruthy();
+  });
+
+  it("applies error variant styling without label", () => {
+    render(<Input aria-label="Email" error="Bad value" />);
+    expect(screen.getByRole("textbox").className).toContain("ring-kumo-danger");
+  });
+
+  it("renders description without label", () => {
+    render(
+      <Input aria-label="Email" description="Enter your work email" />,
+    );
+    expect(screen.getByText("Enter your work email")).toBeTruthy();
+  });
+
   // Accessibility
   it("warns in dev when no accessible name is provided", () => {
     const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});

packages/kumo/src/components/input/input.tsx

@@ -6,7 +6,7 @@ import {
   type ReactNode,
 } from "react";
 import { Input as BaseInput } from "@base-ui/react/input";
-import { Field, type FieldErrorMatch } from "../field/field";
+import { Field, normalizeFieldError, type FieldErrorMatch } from "../field/field";
 
 /** Input size and variant definitions mapping names to their Tailwind classes. */
 export const KUMO_INPUT_VARIANTS = {
@@ -181,21 +181,15 @@ export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     />
   );
 
-  // Render with Field wrapper if label is provided
-  if (label) {
+  // Render with Field wrapper if label, error, or description is provided
+  if (label || error || description) {
     return (
       <Field
         label={label}
         required={required}
         labelTooltip={labelTooltip}
         description={description}
-        error={
-          error
-            ? typeof error === "string"
-              ? { message: error, match: true }
-              : error
-            : undefined
-        }
+        error={normalizeFieldError(error)}
       >
         {input}
       </Field>