@zeno-lib/forms 0.2.1 → 0.3.0

package/dist/create-zeno-form.d.mts

@@ -99,7 +99,7 @@ type CreateZenoFormConfig<FC extends Record<string, AnyComponent>, FMC extends R
  * the `createFormHook` primitives plus the schema-aware `useForm` and the typed
  * `useAppFields` wrappers (prop types are inferred from the injected components).
  */
-declare function createZenoForm<FC extends Record<string, AnyComponent>, FMC extends Record<string, AnyComponent>>(config: CreateZenoFormConfig<FC, FMC>): {
+export declare function createZenoForm<FC extends Record<string, AnyComponent>, FMC extends Record<string, AnyComponent>>(config: CreateZenoFormConfig<FC, FMC>): {
   useAppFields: <TForm extends AnyAppForm>(form: TForm) => FieldWrappers<FC, FormDataOf<TForm>>;
   useAppForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(props: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, FC, FMC>;
   useForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData> = undefined, TOnChange extends undefined | FormValidateOrFn<TFormData> = undefined, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData> = undefined, TOnBlur extends undefined | FormValidateOrFn<TFormData> = undefined, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData> = undefined, TOnSubmit extends undefined | FormValidateOrFn<TFormData> = undefined, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData> = undefined, TOnDynamic extends undefined | FormValidateOrFn<TFormData> = undefined, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData> = undefined, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData> = undefined, TSubmitMeta = never>(options: UseFormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & import("@tanstack/react-form").ReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & NoInfer<FMC> & {
@@ -114,5 +114,4 @@ declare function createZenoForm<FC extends Record<string, AnyComponent>, FMC ext
     form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, [unknown] extends [FC] ? any : FC, [unknown] extends [FMC] ? any : FMC>;
   }>>;
 };
-//#endregion
-export { createZenoForm };
+//#endregion

package/dist/form-element.d.mts

@@ -6,8 +6,8 @@ type FormProviderProps = {
     handleSubmit: () => unknown;
   };
 };
-declare function FormProvider({ children, form }: FormProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function FormProvider({ children, form }: FormProviderProps): import("react").JSX.Element;
 type FormProps = Omit<ComponentProps<"form">, "onSubmit">;
-declare function Form({ children, className, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
+declare function Form({ children, className, ...props }: FormProps): import("react").JSX.Element;
 //#endregion
 export { Form, FormProvider };

package/dist/index.d.mts

@@ -8,4 +8,5 @@ import { useFieldContext, useFormContext } from "./lib/contexts.mjs";
 import { SubmitActionOptions, SubmitActionSchema, applyActionError, submitAction } from "./lib/submit-action.mjs";
 import { useHideFieldErrors, useIsFieldRequired, useIsInvalid } from "./lib/use-is-invalid.mjs";
 import { blurThenChangeLogic } from "./lib/validation-logic.mjs";
-export { type ActionError, type ActionIssue, type ActionResult, type FieldMessage, Form, FormProvider, type SubmitActionOptions, type SubmitActionSchema, ValidationError, type ValidationMode, applyActionError, applyValidationError, blurThenChangeLogic, createZenoForm, submitAction, toActionError, toFieldName, useFieldContext, useFormContext, useHideFieldErrors, useIsFieldRequired, useIsInvalid };
+import { useSelector } from "@tanstack/react-form";
+export { type ActionError, type ActionIssue, type ActionResult, type FieldMessage, Form, FormProvider, type SubmitActionOptions, type SubmitActionSchema, ValidationError, type ValidationMode, applyActionError, applyValidationError, blurThenChangeLogic, createZenoForm, submitAction, toActionError, toFieldName, useFieldContext, useFormContext, useHideFieldErrors, useIsFieldRequired, useIsInvalid, useSelector };

package/dist/index.mjs

@@ -7,4 +7,5 @@ import { Form, FormProvider } from "./form-element.mjs";
 import { toActionError, toFieldName } from "./lib/action-result.mjs";
 import { applyActionError, submitAction } from "./lib/submit-action.mjs";
 import { useHideFieldErrors, useIsFieldRequired, useIsInvalid } from "./lib/use-is-invalid.mjs";
-export { Form, FormProvider, ValidationError, applyActionError, applyValidationError, blurThenChangeLogic, createZenoForm, submitAction, toActionError, toFieldName, useFieldContext, useFormContext, useHideFieldErrors, useIsFieldRequired, useIsInvalid };
+import { useSelector } from "@tanstack/react-form";
+export { Form, FormProvider, ValidationError, applyActionError, applyValidationError, blurThenChangeLogic, createZenoForm, submitAction, toActionError, toFieldName, useFieldContext, useFormContext, useHideFieldErrors, useIsFieldRequired, useIsInvalid, useSelector };

package/dist/lib/aria.d.mts

@@ -1,4 +1,3 @@
 //#region src/lib/aria.d.ts
-declare function describedBy(...entries: [unknown, string][]): string | undefined;
-//#endregion
-export { describedBy };
+export declare function describedBy(...entries: [unknown, string][]): string | undefined;
+//#endregion

package/dist/lib/contexts.d.mts

@@ -1,5 +1,5 @@
 //#region src/lib/contexts.d.ts
 declare const fieldContext: import("react").Context<import("@tanstack/react-form").AnyFieldApi>, formContext: import("react").Context<import("@tanstack/react-form").AnyFormApi>, useFieldContext: <TData>() => import("@tanstack/react-form").FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, useFormContext: () => import("@tanstack/react-form").ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
-declare const FormProvider: import("react").Provider<import("@tanstack/react-form").AnyFormApi>;
+export declare const FormProvider: import("react").Provider<import("@tanstack/react-form").AnyFormApi>;
 //#endregion
-export { FormProvider, fieldContext, formContext, useFieldContext, useFormContext };
+export { fieldContext, formContext, useFieldContext, useFormContext };

package/dist/lib/formatted-number.mjs

@@ -26,7 +26,7 @@ function normalizeMinus(text) {
 }
 /** Format a number for display (on blur, on reset, on first render). */
 function formatNumber(value, { locale, maximumFractionDigits, minimumFractionDigits = 0, useGrouping = true }) {
-	if (value == null || !Number.isFinite(value)) return "";
+	if (value === null || value === void 0 || !Number.isFinite(value)) return "";
 	return normalizeMinus(new Intl.NumberFormat(locale, {
 		maximumFractionDigits,
 		minimumFractionDigits: Math.min(minimumFractionDigits, maximumFractionDigits),
@@ -102,19 +102,19 @@ function parseLocaleNumber(text, locale) {
 }
 function countSignificant(text, end, decimal) {
 	let count = 0;
-	for (let i = 0; i < end && i < text.length; i++) {
+	for (let i = 0; i < end && i < text.length; i += 1) {
 		const char = text[i];
-		if (DIGIT.test(char) || char === decimal || MINUS_SIGNS.test(char)) count++;
+		if (DIGIT.test(char) || char === decimal || MINUS_SIGNS.test(char)) count += 1;
 	}
 	return count;
 }
 function caretForSignificant(text, significant, decimal) {
 	if (significant <= 0) return 0;
 	let count = 0;
-	for (let i = 0; i < text.length; i++) {
+	for (let i = 0; i < text.length; i += 1) {
 		const char = text[i];
 		if (DIGIT.test(char) || char === decimal || char === "-") {
-			count++;
+			count += 1;
 			if (count === significant) return i + 1;
 		}
 	}

package/dist/lib/schema-defaults.mjs

@@ -5,7 +5,7 @@ function getDef(node) {
 }
 function extractDefaultForField(node) {
 	let current = node;
-	for (let depth = 0; depth < MAX_WRAPPER_DEPTH; depth++) {
+	for (let depth = 0; depth < MAX_WRAPPER_DEPTH; depth += 1) {
 		const def = getDef(current);
 		if (!def?.type) return { ok: false };
 		switch (def.type) {

package/dist/lib/schema-required.mjs

@@ -22,11 +22,14 @@ function joinPath(keys) {
 function toRequiredPathKey(name) {
 	return name.replace(INDEX_IN_NAME, "[0]");
 }
-function probeContainer(expected) {
+function probeValue(expected) {
 	if (typeof expected !== "string") return;
-	const kind = expected.toLowerCase();
-	if (kind === "object") return {};
-	if (kind === "array") return [{}];
+	switch (expected.toLowerCase()) {
+		case "object": return {};
+		case "array": return [{}];
+		case "string": return "";
+		default: return;
+	}
 }
 function fillAt(root, keys, value) {
 	let node = root;
@@ -50,20 +53,38 @@ function validateSync(schema, value) {
 	if (result instanceof Promise) return;
 	return "issues" in result && result.issues ? result.issues : [];
 }
+function recordPass(issues, probe, required) {
+	const failing = /* @__PURE__ */ new Set();
+	const filledStrings = [];
+	let descended = false;
+	for (const issue of issues) {
+		const keys = issue.path?.map(pathKey) ?? [];
+		if (keys.length === 0) continue;
+		const path = joinPath(keys);
+		failing.add(path);
+		required.add(path);
+		const value = probeValue(issue.expected);
+		if (value !== void 0 && fillAt(probe, keys, value)) {
+			descended = true;
+			if (value === "") filledStrings.push(path);
+		}
+	}
+	return {
+		descended,
+		failing,
+		filledStrings
+	};
+}
 function getRequiredPaths(schema) {
 	const required = /* @__PURE__ */ new Set();
 	const probe = {};
-	for (let depth = 0; depth < MAX_PROBE_DEPTH; depth++) {
+	let filledStrings = [];
+	for (let depth = 0; depth < MAX_PROBE_DEPTH; depth += 1) {
 		const issues = validateSync(schema, probe);
 		if (!issues) return required;
-		let descended = false;
-		for (const issue of issues) {
-			const keys = issue.path?.map(pathKey) ?? [];
-			if (keys.length === 0) continue;
-			required.add(joinPath(keys));
-			const container = probeContainer(issue.expected);
-			if (container !== void 0 && fillAt(probe, keys, container)) descended = true;
-		}
+		const { descended, failing, filledStrings: filled } = recordPass(issues, probe, required);
+		for (const path of filledStrings) if (!failing.has(path)) required.delete(path);
+		filledStrings = filled;
 		if (!descended) break;
 	}
 	return required;

package/dist/lib/use-form-dialog.d.mts

@@ -65,8 +65,9 @@ type LeaveGuard = {
 declare function useLeaveGuard({ hasUnsavedChanges }: UseLeaveGuardOptions): LeaveGuard;
 /**
  * Find the element to focus for field `name` inside `root`: the control with
- * `id={name}` (what the shipped fields render), else the first focusable
- * element inside the field root marked `data-field={name}`.
+ * `id={name}` (fields that use the name as their id), else, inside the field
+ * root marked `data-field={name}`, the control its label points at (the shipped
+ * fields' ids come from `useId`), else that root's first focusable element.
  */
 declare function findFieldElement(root: ParentNode | null | undefined, name: string): HTMLElement | null;
 //#endregion

package/dist/lib/use-form-dialog.mjs

@@ -77,14 +77,18 @@ function attributeSelector(attribute, value) {
 }
 /**
 * Find the element to focus for field `name` inside `root`: the control with
-* `id={name}` (what the shipped fields render), else the first focusable
-* element inside the field root marked `data-field={name}`.
+* `id={name}` (fields that use the name as their id), else, inside the field
+* root marked `data-field={name}`, the control its label points at (the shipped
+* fields' ids come from `useId`), else that root's first focusable element.
 */
 function findFieldElement(root, name) {
 	if (!root) return null;
 	const byId = root.querySelector(attributeSelector("id", name));
 	if (byId) return byId;
-	return root.querySelector(attributeSelector("data-field", name))?.querySelector(FOCUSABLE) ?? null;
+	const fieldRoot = root.querySelector(attributeSelector("data-field", name));
+	if (!fieldRoot) return null;
+	const labelFor = fieldRoot.querySelector("label[for]")?.getAttribute("for");
+	return (labelFor ? fieldRoot.querySelector(attributeSelector("id", labelFor)) : null) ?? fieldRoot.querySelector(FOCUSABLE);
 }
 //#endregion
 export { findFieldElement, useFormDialog, useLeaveGuard };

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@zeno-lib/forms",
-  "version": "0.2.1",
+  "version": "0.3.0",
+  "repository": {
+    "url": "https://github.com/zeno-lib/zeno.git",
+    "directory": "packages/forms"
+  },
   "type": "module",
   "exports": {
     ".": {
@@ -25,12 +29,22 @@
     "dist",
     "src"
   ],
-  "publishConfig": {
-    "access": "public"
+  "dependencies": {
+    "@tanstack/react-form": "1.33.5"
   },
-  "repository": {
-    "url": "https://github.com/zeno-lib/zeno.git",
-    "directory": "packages/forms"
+  "devDependencies": {
+    "@types/node": "26.6.4",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@zeno-lib/test": "^0.1.1",
+    "@zeno-lib/typescript": "^1.1.0",
+    "@zeno-lib/ui": "^0.0.1",
+    "lucide-react": "^1.52.0",
+    "tsdown": "^0.23.0",
+    "typescript": "7.0.2",
+    "vite": "8.3.3",
+    "vitest": "5.0.3",
+    "zod": "^4.6.5"
   },
   "peerDependencies": {
     "@tanstack/react-devtools": ">=0.10",
@@ -46,28 +60,17 @@
     },
     "@tanstack/react-form-devtools": {
       "optional": true
+    },
+    "zod": {
+      "optional": true
     }
   },
-  "dependencies": {
-    "@tanstack/react-form": "1.33.5",
-    "@tanstack/react-form-nextjs": "1.33.5"
-  },
-  "devDependencies": {
-    "@types/node": "25.6.0",
-    "@types/react": "19.2.14",
-    "@types/react-dom": "19.2.3",
-    "lucide-react": "^1.23.0",
-    "tsdown": "^0.22.14",
-    "typescript": "7.0.2",
-    "vite": "8.0.16",
-    "vitest": "5.0.2",
-    "zod": "^4.3.6",
-    "@zeno-lib/test": "^0.1.0",
-    "@zeno-lib/typescript": "^1.1.0",
-    "@zeno-lib/ui": "^0.0.1"
+  "publishConfig": {
+    "access": "public"
   },
   "scripts": {
     "build": "tsdown",
+    "dev": "tsdown --watch --no-clean",
     "test": "vitest --run",
     "test:watch": "vitest watch",
     "types:check": "tsc --noEmit"

package/src/fields/checkbox-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ComponentProps, ReactNode } from "react"
+import { type ComponentProps, type ReactNode, useId } from "react"
 import { Checkbox } from "@/components/ui/checkbox"
 import {
   Field,
@@ -35,8 +35,9 @@ function CheckboxField({
   ...props
 }: CheckboxFieldProps) {
   const field = useFieldContext<boolean>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -56,7 +57,7 @@ function CheckboxField({
         )}
         aria-invalid={isInvalid || undefined}
         checked={field.state.value ?? false}
-        id={field.name}
+        id={id}
         name={field.name}
         onBlur={field.handleBlur}
         onCheckedChange={(value) => field.handleChange(value === true)}
@@ -64,7 +65,7 @@ function CheckboxField({
       />
       <FieldContent>
         {label && (
-          <FieldLabel className="font-normal" htmlFor={field.name}>
+          <FieldLabel className="font-normal" htmlFor={id}>
             {label}
             {isRequired && <RequiredIndicator />}
           </FieldLabel>

package/src/fields/checkbox-group-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ReactNode } from "react"
+import { type ReactNode, useId } from "react"
 import { Checkbox } from "@/components/ui/checkbox"
 import {
   Field,
@@ -64,8 +64,9 @@ function CheckboxGroupField<V = string>({
   required,
 }: CheckboxGroupFieldProps<V>) {
   const field = useFieldContext<V[] | null | undefined>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -116,7 +117,7 @@ function CheckboxGroupField<V = string>({
         data-slot="checkbox-group"
       >
         {options.map((option, index) => {
-          const id = `${field.name}-${index}`
+          const optionId = `${id}-${index}`
           return (
             <Field
               data-invalid={isInvalid}
@@ -127,7 +128,7 @@ function CheckboxGroupField<V = string>({
                 aria-invalid={isInvalid || undefined}
                 checked={checked.includes(option.value)}
                 disabled={disabled || option.disabled}
-                id={id}
+                id={optionId}
                 name={field.name}
                 onBlur={field.handleBlur}
                 onCheckedChange={(on) => toggle(option.value, on === true)}
@@ -135,13 +136,13 @@ function CheckboxGroupField<V = string>({
               />
               {option.description ? (
                 <FieldContent>
-                  <FieldLabel className="font-normal" htmlFor={id}>
+                  <FieldLabel className="font-normal" htmlFor={optionId}>
                     {option.label}
                   </FieldLabel>
                   <FieldDescription>{option.description}</FieldDescription>
                 </FieldContent>
               ) : (
-                <FieldLabel className="w-auto font-normal" htmlFor={id}>
+                <FieldLabel className="w-auto font-normal" htmlFor={optionId}>
                   {option.label}
                 </FieldLabel>
               )}

package/src/fields/combobox-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ReactNode } from "react"
+import { type ReactNode, useId } from "react"
 import {
   Combobox,
   ComboboxContent,
@@ -95,8 +95,9 @@ function ComboboxField<T = string>({
   showClear = true,
 }: ComboboxFieldProps<T>) {
   const field = useFieldContext()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -113,7 +114,7 @@ function ComboboxField<T = string>({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>
@@ -124,7 +125,7 @@ function ComboboxField<T = string>({
         items={items}
         onInputValueChange={onInputValueChange}
         onValueChange={(next) => {
-          if (next == null) {
+          if (next === null) {
             field.handleChange(undefined)
             return
           }
@@ -139,11 +140,11 @@ function ComboboxField<T = string>({
           )}
           aria-invalid={isInvalid || undefined}
           className={className}
-          id={field.name}
+          id={id}
           name={field.name}
           onBlur={field.handleBlur}
           placeholder={placeholder}
-          showClear={showClear && value != null && value !== "" && !loading}
+          showClear={showClear && value !== null && value !== "" && !loading}
         >
           {loading && (
             <InputGroupAddon align="inline-end">

package/src/fields/date-picker-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ComponentProps, ReactNode } from "react"
+import { type ComponentProps, type ReactNode, useId } from "react"
 import { buttonVariants } from "@/components/ui/button"
 import { Calendar } from "@/components/ui/calendar"
 import {
@@ -60,21 +60,22 @@ function DatePickerField({
   triggerClassName,
 }: DatePickerFieldProps) {
   const field = useFieldContext<Date | undefined>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
   const schemaRequired = useIsFieldRequired(field)
   const isRequired = required ?? schemaRequired
 
-  const value = field.state.value
+  const { value } = field.state
   const empty = !value
 
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>
@@ -92,7 +93,7 @@ function DatePickerField({
             triggerClassName
           )}
           data-empty={empty || undefined}
-          id={field.name}
+          id={id}
           // Base UI's Popover handles open state — we still need blur on the
           // form's reactive store. Passing onBlur here mirrors how `<select>`
           // commits on close.

package/src/fields/input-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import { Children, type ComponentProps, type ReactNode } from "react"
+import { Children, type ComponentProps, type ReactNode, useId } from "react"
 import {
   Field,
   FieldDescription,
@@ -40,8 +40,9 @@ function InputField({
   ...props
 }: InputFieldProps) {
   const field = useFieldContext<string>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -55,7 +56,7 @@ function InputField({
       [showError, errorId]
     ),
     "aria-invalid": isInvalid || undefined,
-    id: field.name,
+    id,
     name: field.name,
     onBlur: field.handleBlur,
     onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
@@ -67,7 +68,7 @@ function InputField({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>

package/src/fields/multi-select-field.tsx

@@ -8,7 +8,7 @@ import {
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
 import { XIcon } from "lucide-react"
-import type { ReactNode } from "react"
+import { type ReactNode, useId } from "react"
 import { Button } from "@/components/ui/button"
 import {
   Combobox,
@@ -96,8 +96,9 @@ function MultiSelectField<T = string>({
 }: MultiSelectFieldProps<T>) {
   const field = useFieldContext<MultiSelectValue<T>[] | null | undefined>()
   const anchor = useComboboxAnchor()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -114,7 +115,7 @@ function MultiSelectField<T = string>({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>
@@ -143,7 +144,7 @@ function MultiSelectField<T = string>({
                     [showError, errorId]
                   )}
                   aria-invalid={isInvalid || undefined}
-                  id={field.name}
+                  id={id}
                   name={field.name}
                   onBlur={field.handleBlur}
                   placeholder={chips.length === 0 ? placeholder : undefined}

package/src/fields/number-field.tsx

@@ -11,7 +11,7 @@ type NumberFieldProps = Omit<
 
 function NumberField(props: NumberFieldProps) {
   const field = useFieldContext<number | undefined>()
-  const value = field.state.value
+  const { value } = field.state
   const inputValue =
     typeof value === "number" && !Number.isNaN(value) ? value : ""
 

package/src/fields/otp-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ReactNode } from "react"
+import { type ReactNode, useId } from "react"
 import {
   Field,
   FieldDescription,
@@ -57,8 +57,9 @@ function OtpField({
   required,
 }: OtpFieldProps) {
   const field = useFieldContext<string>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -68,7 +69,7 @@ function OtpField({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>
@@ -83,7 +84,7 @@ function OtpField({
         className={className}
         containerClassName={containerClassName}
         disabled={disabled}
-        id={field.name}
+        id={id}
         maxLength={maxLength}
         name={field.name}
         onBlur={field.handleBlur}

package/src/fields/radio-group-field.tsx

@@ -36,8 +36,9 @@ function RadioGroupField({
   ...props
 }: RadioGroupFieldProps) {
   const field = useFieldContext<string>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors

package/src/fields/select-field.tsx

@@ -8,7 +8,7 @@ import {
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
 import type { ComponentProps, ReactNode } from "react"
-import { Children, isValidElement, useMemo } from "react"
+import { Children, isValidElement, useId, useMemo } from "react"
 import {
   Field,
   FieldDescription,
@@ -48,8 +48,9 @@ function SelectField({
   ...props
 }: SelectFieldProps) {
   const field = useFieldContext()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -72,7 +73,7 @@ function SelectField({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>
@@ -91,7 +92,7 @@ function SelectField({
           )}
           aria-invalid={isInvalid || undefined}
           className={triggerClassName}
-          id={field.name}
+          id={id}
           onBlur={field.handleBlur}
           size={triggerSize}
         >

package/src/fields/slider-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ComponentProps, ReactNode } from "react"
+import { type ComponentProps, type ReactNode, useId } from "react"
 import {
   Field,
   FieldContent,
@@ -43,28 +43,31 @@ function SliderField({
   ...props
 }: SliderFieldProps) {
   const field = useFieldContext<SliderValue>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
   const schemaRequired = useIsFieldRequired(field)
   const isRequired = required ?? schemaRequired
 
-  const value = field.state.value
+  const { value } = field.state
   const readout = formatValue && value !== undefined ? formatValue(value) : null
+  // Not a truthiness check: a formatter may return the number 0, which must still render.
+  const hasReadout = readout !== null && readout !== undefined
 
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
-      {(label || readout) && (
+      {(label || hasReadout) && (
         <FieldContent className="flex-row items-center justify-between">
           {label && (
-            <FieldLabel htmlFor={field.name}>
+            <FieldLabel htmlFor={id}>
               {label}
               {isRequired && <RequiredIndicator />}
             </FieldLabel>
           )}
-          {readout && (
+          {hasReadout && (
             <span className="text-muted-foreground text-sm tabular-nums">
               {readout}
             </span>
@@ -77,13 +80,13 @@ function SliderField({
           [showError, errorId]
         )}
         aria-invalid={isInvalid || undefined}
-        id={field.name}
+        id={id}
         name={field.name}
         onBlur={field.handleBlur}
         onValueChange={(next) => {
-          const value: SliderValue =
+          const nextValue: SliderValue =
             typeof next === "number" ? next : Array.from(next)
-          field.handleChange(value)
+          field.handleChange(nextValue)
         }}
         value={value}
         {...props}

package/src/fields/switch-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ComponentProps, ReactNode } from "react"
+import { type ComponentProps, type ReactNode, useId } from "react"
 import {
   Field,
   FieldContent,
@@ -35,8 +35,9 @@ function SwitchField({
   ...props
 }: SwitchFieldProps) {
   const field = useFieldContext<boolean>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -51,7 +52,7 @@ function SwitchField({
     >
       <FieldContent>
         {label && (
-          <FieldLabel htmlFor={field.name}>
+          <FieldLabel htmlFor={id}>
             {label}
             {isRequired && <RequiredIndicator />}
           </FieldLabel>
@@ -70,7 +71,7 @@ function SwitchField({
         )}
         aria-invalid={isInvalid || undefined}
         checked={field.state.value ?? false}
-        id={field.name}
+        id={id}
         name={field.name}
         onBlur={field.handleBlur}
         onCheckedChange={(value) => field.handleChange(value)}

package/src/fields/textarea-field.tsx

@@ -7,7 +7,7 @@ import {
   useIsFieldRequired,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import { Children, type ComponentProps, type ReactNode } from "react"
+import { Children, type ComponentProps, type ReactNode, useId } from "react"
 import {
   Field,
   FieldDescription,
@@ -37,8 +37,9 @@ function TextAreaField({
   ...props
 }: TextAreaFieldProps) {
   const field = useFieldContext<string>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
@@ -52,7 +53,7 @@ function TextAreaField({
       [showError, errorId]
     ),
     "aria-invalid": isInvalid || undefined,
-    id: field.name,
+    id,
     name: field.name,
     onBlur: field.handleBlur,
     onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) =>
@@ -64,7 +65,7 @@ function TextAreaField({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>

package/src/form-dialog.tsx

@@ -63,8 +63,8 @@ type DialogForm<TValues> = {
     }
   }
   readonly state: DialogFormState
-  handleSubmit(): unknown
-  reset(values?: TValues): void
+  handleSubmit: () => unknown
+  reset: (values?: TValues) => void
 }
 
 type FormDialogProps<TValues> = {

package/src/index.ts

@@ -1,5 +1,6 @@
 /* biome-ignore-all lint/performance/noBarrelFile: single npm entry for the headless form API. */
 
+export { useSelector } from "@tanstack/react-form"
 export { createZenoForm } from "./create-zeno-form"
 export { Form, FormProvider } from "./form-element"
 export {

package/src/lib/formatted-number.ts

@@ -84,7 +84,7 @@ function formatNumber(
     useGrouping = true,
   }: FormatNumberOptions
 ): string {
-  if (value == null || !Number.isFinite(value)) {
+  if (value === null || value === undefined || !Number.isFinite(value)) {
     return ""
   }
   return normalizeMinus(
@@ -236,10 +236,10 @@ function parseLocaleNumber(text: string, locale?: string): number | null {
 // the same logical place after separators were inserted or removed.
 function countSignificant(text: string, end: number, decimal: string): number {
   let count = 0
-  for (let i = 0; i < end && i < text.length; i++) {
+  for (let i = 0; i < end && i < text.length; i += 1) {
     const char = text[i] as string
     if (DIGIT.test(char) || char === decimal || MINUS_SIGNS.test(char)) {
-      count++
+      count += 1
     }
   }
   return count
@@ -254,10 +254,10 @@ function caretForSignificant(
     return 0
   }
   let count = 0
-  for (let i = 0; i < text.length; i++) {
+  for (let i = 0; i < text.length; i += 1) {
     const char = text[i] as string
     if (DIGIT.test(char) || char === decimal || char === "-") {
-      count++
+      count += 1
       if (count === significant) {
         return i + 1
       }

package/src/lib/schema-defaults.ts

@@ -37,7 +37,7 @@ function getDef(node: SchemaNode | undefined): SchemaDef | undefined {
 
 function extractDefaultForField(node: SchemaNode): ExtractResult {
   let current: SchemaNode | undefined = node
-  for (let depth = 0; depth < MAX_WRAPPER_DEPTH; depth++) {
+  for (let depth = 0; depth < MAX_WRAPPER_DEPTH; depth += 1) {
     const def: SchemaDef | undefined = getDef(current)
     if (!def?.type) {
       return { ok: false }

package/src/lib/schema-required.test.ts

@@ -38,6 +38,26 @@ describe("getRequiredPaths", () => {
     expect(required.has("role")).toBe(false)
   })
 
+  test("a string that accepts the empty value it starts at is not required", () => {
+    const schema = z.object({
+      email: z.email(),
+      members: z.array(z.object({ name: z.string().min(1), note: z.string() })),
+      name: z.string().trim().min(1),
+      notes: z.string(),
+      profile: z.object({ bio: z.string(), title: z.string().min(1) }),
+      subtitle: z.string().nullable(),
+    })
+    const required = getRequiredPaths(schema)
+    expect(required.has("notes")).toBe(false)
+    expect(required.has("subtitle")).toBe(false)
+    expect(required.has("profile.bio")).toBe(false)
+    expect(required.has("members[0].note")).toBe(false)
+    expect(required.has("email")).toBe(true)
+    expect(required.has("name")).toBe(true)
+    expect(required.has("profile.title")).toBe(true)
+    expect(required.has("members[0].name")).toBe(true)
+  })
+
   test("nested z.object reports the parent and its required children", () => {
     const schema = z.object({
       profile: z.object({
@@ -79,7 +99,7 @@ describe("getRequiredPaths", () => {
   test("nested arrays descend through every level", () => {
     const schema = z.object({
       groups: z.array(
-        z.object({ members: z.array(z.object({ name: z.string() })) })
+        z.object({ members: z.array(z.object({ name: z.string().min(1) })) })
       ),
     })
     const required = getRequiredPaths(schema)
@@ -166,7 +186,7 @@ describe("getRequiredPaths", () => {
     const schema: StandardSchemaLike = {
       "~standard": {
         validate: (value) => {
-          const profile = (value as { profile?: unknown }).profile
+          const { profile } = value as { profile?: unknown }
           return profile === undefined
             ? { issues: [{ expected: "Object", path: [{ key: "profile" }] }] }
             : {

package/src/lib/schema-required.ts

@@ -13,6 +13,11 @@
 // index `0` and recorded index-agnostically, so `members[0].name` in the set
 // matches every row's `members[3].name` via `toRequiredPathKey`.
 //
+// A missing string is probed again as `""`, the value the form starts it at
+// (`extractZodDefaults`). A field that accepts `""` (a bare `z.string()`)
+// can't fail while untouched, so it leaves the set; one that rejects it
+// (`.min(1)`, `z.email()`) stays.
+//
 // Paths use TanStack Form's field-name syntax: dots for object keys, brackets
 // for array indices (`members[0].name`, not `members.0.name`).
 //
@@ -50,6 +55,7 @@ const INDEX_SEGMENT = /^\d+$/
 const INDEX_IN_NAME = /\[\d+\]|\.(\d+)(?=\.|\[|$)/g
 
 function pathKey(part: PathPart): PropertyKey {
+  // biome-ignore lint/suspicious/noUnnecessaryConditions: issue paths come from third-party validators at runtime, and a non-conforming `null` segment would make `in` throw.
   if (typeof part === "object" && part !== null && "key" in part) {
     return part.key
   }
@@ -85,18 +91,20 @@ function toRequiredPathKey(name: string): string {
   return name.replace(INDEX_IN_NAME, "[0]")
 }
 
-function probeContainer(expected: unknown): unknown {
+function probeValue(expected: unknown): unknown {
   if (typeof expected !== "string") {
     return
   }
-  const kind = expected.toLowerCase()
-  if (kind === "object") {
-    return {}
-  }
-  if (kind === "array") {
-    return [{}]
+  switch (expected.toLowerCase()) {
+    case "object":
+      return {}
+    case "array":
+      return [{}]
+    case "string":
+      return ""
+    default:
+      return
   }
-  return
 }
 
 // Write `value` at `keys` inside `root`, only where nothing is set yet.
@@ -137,26 +145,62 @@ function validateSync(
   return "issues" in result && result.issues ? result.issues : []
 }
 
+type ProbePass = {
+  readonly descended: boolean
+  readonly failing: ReadonlySet<string>
+  readonly filledStrings: readonly string[]
+}
+
+// Record one pass's failing paths, and fill the probe at each of them for the
+// next pass.
+function recordPass(
+  issues: readonly StandardIssue[],
+  probe: Record<PropertyKey, unknown>,
+  required: Set<string>
+): ProbePass {
+  const failing = new Set<string>()
+  const filledStrings: string[] = []
+  let descended = false
+  for (const issue of issues) {
+    const keys = issue.path?.map(pathKey) ?? []
+    if (keys.length === 0) {
+      continue
+    }
+    const path = joinPath(keys)
+    failing.add(path)
+    required.add(path)
+    const value = probeValue(issue.expected)
+    if (value !== undefined && fillAt(probe, keys, value)) {
+      descended = true
+      if (value === "") {
+        filledStrings.push(path)
+      }
+    }
+  }
+  return { descended, failing, filledStrings }
+}
+
 function getRequiredPaths(schema: StandardSchemaLike): Set<string> {
   const required = new Set<string>()
   const probe: Record<PropertyKey, unknown> = {}
-  for (let depth = 0; depth < MAX_PROBE_DEPTH; depth++) {
+  // Paths the previous pass filled with `""`: they stay only if they still fail.
+  let filledStrings: readonly string[] = []
+  for (let depth = 0; depth < MAX_PROBE_DEPTH; depth += 1) {
     const issues = validateSync(schema, probe)
     if (!issues) {
       return required
     }
-    let descended = false
-    for (const issue of issues) {
-      const keys = issue.path?.map(pathKey) ?? []
-      if (keys.length === 0) {
-        continue
-      }
-      required.add(joinPath(keys))
-      const container = probeContainer(issue.expected)
-      if (container !== undefined && fillAt(probe, keys, container)) {
-        descended = true
+    const {
+      descended,
+      failing,
+      filledStrings: filled,
+    } = recordPass(issues, probe, required)
+    for (const path of filledStrings) {
+      if (!failing.has(path)) {
+        required.delete(path)
       }
     }
+    filledStrings = filled
     if (!descended) {
       break
     }

package/src/lib/use-form-dialog.ts

@@ -156,8 +156,9 @@ function attributeSelector(attribute: string, value: string): string {
 
 /**
  * Find the element to focus for field `name` inside `root`: the control with
- * `id={name}` (what the shipped fields render), else the first focusable
- * element inside the field root marked `data-field={name}`.
+ * `id={name}` (fields that use the name as their id), else, inside the field
+ * root marked `data-field={name}`, the control its label points at (the shipped
+ * fields' ids come from `useId`), else that root's first focusable element.
  */
 function findFieldElement(
   root: ParentNode | null | undefined,
@@ -171,7 +172,14 @@ function findFieldElement(
     return byId
   }
   const fieldRoot = root.querySelector(attributeSelector("data-field", name))
-  return fieldRoot?.querySelector<HTMLElement>(FOCUSABLE) ?? null
+  if (!fieldRoot) {
+    return null
+  }
+  const labelFor = fieldRoot.querySelector("label[for]")?.getAttribute("for")
+  const labelled = labelFor
+    ? fieldRoot.querySelector<HTMLElement>(attributeSelector("id", labelFor))
+    : null
+  return labelled ?? fieldRoot.querySelector<HTMLElement>(FOCUSABLE)
 }
 
 export type {

package/src/lib/validation-logic.test.ts

@@ -32,7 +32,6 @@ function makeRun() {
   const runValidation = vi.fn(
     (props: { form: AnyFormApi; validators: ObservedValidator[] }) => {
       observed.push(props.validators)
-      return
     }
   )
   return { observed, runValidation }

package/src/slider-field.test.tsx

@@ -0,0 +1,30 @@
+import { cleanup, render, screen } from "@zeno-lib/test/testing-library"
+import { afterEach, describe, expect, test, vi } from "vitest"
+import { Form, FormProvider, useForm } from "./create-form"
+
+afterEach(() => {
+  cleanup()
+})
+
+describe("SliderField", () => {
+  function Harness() {
+    const form = useForm({ defaultValues: { volume: 0 }, onSubmit: vi.fn() })
+    const { SliderField } = form
+    return (
+      <FormProvider form={form}>
+        <Form>
+          <SliderField
+            formatValue={(value) => value}
+            label="Volume"
+            name="volume"
+          />
+        </Form>
+      </FormProvider>
+    )
+  }
+
+  test("renders a numeric readout of 0", () => {
+    render(<Harness />)
+    expect(screen.getByText("0").tagName).toBe("SPAN")
+  })
+})

package/src/use-app-fields.test.tsx

@@ -30,7 +30,6 @@ describe("EmailField / PasswordField", () => {
     }
     render(<H />)
     const input = screen.getByLabelText(CONTACT_EMAIL_LABEL) as HTMLInputElement
-    expect(input.id).toBe("contactEmail")
     expect(input.name).toBe("contactEmail")
     await user.type(input, "u@example.com")
     expect(input.value).toBe("u@example.com")
@@ -54,7 +53,6 @@ describe("EmailField / PasswordField", () => {
     }
     render(<H />)
     const input = screen.getByLabelText(PASSWORD_LABEL) as HTMLInputElement
-    expect(input.id).toBe("password")
     expect(input.name).toBe("password")
     expect(input.type).toBe("password")
   })
@@ -137,3 +135,32 @@ describe("CheckboxField — boolean state wrapper", () => {
     expect(checkbox.getAttribute("aria-checked")).toBe("true")
   })
 })
+
+describe("field ids", () => {
+  test("two forms with the same field name label their own controls", () => {
+    const schema = z.object({ description: z.string().min(1) })
+    function H({ label }: { label: string }) {
+      const form = useForm({ onSubmit: vi.fn(), schema })
+      const { InputField } = form
+      return (
+        <FormProvider form={form}>
+          <Form>
+            <InputField description="Hint" label={label} name="description" />
+          </Form>
+        </FormProvider>
+      )
+    }
+    render(
+      <>
+        <H label="Page description" />
+        <H label="Dialog description" />
+      </>
+    )
+    const page = screen.getByRole("textbox", { name: "Page description" })
+    const dialog = screen.getByRole("textbox", { name: "Dialog description" })
+    expect(dialog).not.toBe(page)
+    const hints = screen.getAllByText("Hint")
+    expect(page.getAttribute("aria-describedby")).toBe(hints[0]?.id)
+    expect(dialog.getAttribute("aria-describedby")).toBe(hints[1]?.id)
+  })
+})