Guidance for disabling browser autofill in data-entry forms

[shreyam1008]

I’m using TanStack Form for an internal data-entry app. One operator enters records for many different people on the same browser. Chrome and Safari may suggest the operator’s saved address, password managers attach to password fields, and normal inputs offer values from previous records. That makes it easy to put one person’s data into another record.

Today I add autocomplete="off" to the form and individual inputs:

<form autoComplete="off">
  <form.Field name="address.line1">
    {(field) => (
      <input
        name={field.name}
        autoComplete="off"
        value={field.state.value}
        onChange={(e) => field.handleChange(e.target.value)}
      />
    )}
  </form.Field>
</form>

This is inconsistent across browsers and password managers, and easy to miss in reusable field components.

Since TanStack Form is headless, I’m not expecting it to override browser behavior. Could the docs include a recommended best-effort pattern for this use case, covering address, password, and ordinary text fields, plus the limits that cannot be controlled? A small example using shared field components would be enough.

[MILLERMARRU]

Since this is browser/password-manager behavior rather than anything TanStack Form controls, the reliability ceiling is set by Chrome and Safari's heuristics, not the form library, but there's a more consistent pattern than plain autocomplete="off", which browsers have increasingly started ignoring for password-adjacent fields specifically.

• Ordinary text/address fields: autocomplete="off" mostly works here, Chrome respects it for non-credential fields more reliably than for login-shaped ones. Randomizing the name attribute per record (e.g. name={address-line1-${recordId}}) is the more bulletproof fallback, since autofill heuristics key heavily off name/id values, a name that doesn't look like a stable, repeated field is much less likely to get suggestions attached to it.
• Password fields: autocomplete="off" is well known to be ignored by Chrome/Safari's password managers. The documented working alternative is autocomplete="new-password", browsers treat that as "don't offer a saved credential here" even though it's semantically meant for signup forms, it's become the de facto way to suppress save-prompts and autofill on a password field that isn't a login form.
• Address autofill specifically: setting autocomplete="off" on the <form> element only, without repeating it per-field, is what tends to leak through in Chrome, autofill in Chrome largely ignores the form-level attribute and evaluates each field's own autocomplete value, so your reusable field component needs to accept and forward its own autocomplete prop rather than relying on inheritance from the wrapping <form>.

None of this is airtight across every browser/password-manager combination, that limit is real and worth documenting as-is rather than promising a fix, per-field autocomplete="new-password" (for anything credential-adjacent) plus randomized name attributes (for everything else) is the most consistent combination people land on for exactly this kind of shared-browser data-entry scenario.

[praveen-kumary]

Here is a battle-tested pattern for disabling browser and password-manager autofill in internal data-entry applications built with TanStack Form.

Because modern browser heuristics (especially Chrome and Safari) aggressively override autoComplete="off" when they detect field names matching common personal data (name, email, address, password), the most reliable pattern combines per-field autocomplete attributes, session-scoped/randomized DOM identifiers, and on-focus readOnly toggling.

---

Reusable Field Component Pattern

Below is a reusable TanStack Form field component that wraps the standard input with autofill defense strategies:

import * as React from 'react'
import { FieldApi } from '@tanstack/react-form'

interface DataEntryInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  // Pass the TanStack Form field API directly
  field: FieldApi<any, any, any, any>
  label: string
  // Field type category to apply the right autofill defense
  entryType?: 'text' | 'address' | 'password' | 'email' | 'search'
}

export function DataEntryInput({
  field,
  label,
  entryType = 'text',
  id,
  type = 'text',
  className,
  ...rest
}: DataEntryInputProps) {
  // 1. Generate a stable but unique DOM ID per component instance to prevent cross-record heuristic matching
  const uniqueId = React.useId()
  const domId = id ?? `field-${field.name.replace(/\./g, '-')}-${uniqueId}`

  // 2. Select the optimal autocomplete defense strategy per field category
  const resolveAutoComplete = (): string => {
    switch (entryType) {
      case 'password':
        // Modern password managers ignore "off", but respect "new-password"
        return 'new-password'
      case 'address':
      case 'email':
      case 'text':
        // Non-standard tokens like "one-time-code" or "off" prevent address heuristic matching
        return 'off'
      case 'search':
        return 'off'
      default:
        return 'off'
    }
  }

  // 3. Optional ReadOnly Guard: Prevents browsers from auto-populating fields on initial page load
  const [isReady, setIsReady] = React.useState(false)

  return (
    <div className="flex flex-col gap-1.5">
      <label htmlFor={domId} className="text-sm font-medium text-slate-700">
        {label}
      </label>
      <input
        id={domId}
        name={field.name}
        type={type}
        value={field.state.value ?? ''}
        onBlur={field.handleBlur}
        onChange={(e) => field.handleChange(e.target.value)}
        // Multi-level autofill suppression:
        autoComplete={resolveAutoComplete()}
        autoCorrect="off"
        autoCapitalize="off"
        spellCheck={false}
        data-form-type="other"
        data-lpignore="true" // 1Password / LastPass ignore hint
        data-1p-ignore="true"
        // Prevent autofill before operator interaction
        readOnly={!isReady}
        onFocus={() => setIsReady(true)}
        className={`px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${className ?? ''}`}
        {...rest}
      />
      {field.state.meta.errors ? (
        <span className="text-xs text-red-500">{field.state.meta.errors.join(', ')}</span>
      ) : null}
    </div>
  )
}

---

Usage in TanStack Form

When assembling your data entry form:

import { useForm } from '@tanstack/react-form'
import { DataEntryInput } from './DataEntryInput'

export function OperatorPatientForm({ recordId }: { recordId: string }) {
  const form = useForm({
    defaultValues: {
      patientName: '',
      homeAddress: '',
      notes: '',
      accessPin: '',
    },
    onSubmit: async ({ value }) => {
      // submit handler
    },
  })

  return (
    <form
      autoComplete="off"
      onSubmit={(e) => {
        e.preventDefault()
        e.stopPropagation()
        form.handleSubmit()
      }}
      className="space-y-4"
    >
      {/* Hidden dummy fields to consume early browser autofill traps */}
      <input type="text" style={{ display: 'none' }} tabIndex={-1} aria-hidden="true" />
      <input type="password" style={{ display: 'none' }} tabIndex={-1} aria-hidden="true" />

      <form.Field name="patientName">
        {(field) => (
          <DataEntryInput
            field={field}
            label="Patient Full Name"
            entryType="text"
          />
        )}
      </form.Field>

      <form.Field name="homeAddress">
        {(field) => (
          <DataEntryInput
            field={field}
            label="Street Address"
            entryType="address"
          />
        )}
      </form.Field>

      <form.Field name="accessPin">
        {(field) => (
          <DataEntryInput
            field={field}
            label="Security PIN / Password"
            type="password"
            entryType="password"
          />
        )}
      </form.Field>

      <button type="submit" className="btn-primary">
        Save Record
      </button>
    </form>
  )
}

---

Summary of Controlled Behaviors & Inherent Browser Limits

Field Type	Defense Mechanism	Behavior Across Browsers
Password	autoComplete="new-password" + data-1p-ignore="true"	Prevents password managers from suggesting existing saved logins.
Address & Text	autoComplete="off" + readOnly on mount (unlocked onFocus)	Prevents Chrome/Safari from auto-filling fields on page load or when tabbing through.
Hidden Traps	Dummy invisible inputs at top of <form>	Catches aggressive Safari/Chrome autofill that targets the first text/password inputs in the DOM.
Hard Limits	Explicit user action (e.g. user right-clicks -> "Autofill")	Cannot be blocked by JavaScript or HTML (browser OS policy).