# Autocomplete & Names

**MUST** · **ID:** `forms-autocomplete` · **Category:** forms
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/forms-autocomplete

> MUST: `autocomplete` + meaningful `name`; correct `type` and `inputmode`

Set autocomplete and meaningful name values to enable browser autofill

Modern browsers can autofill form data, saving users time. Use the autocomplete attribute with standard values like "email", "tel", "street-address", etc. Also use semantic name attributes. This helps password managers and other assistive tools.

## Bad — do not do this

`forms-autocomplete-bad`

```tsx
export function AutocompleteBad() {
  return (
    <div className="w-full max-w-sm">
      <form className="space-y-4">
        <div>
          <label htmlFor="bad-auto-email" className="block text-sm font-medium text-foreground mb-1">
            Email
          </label>
          <input
            id="bad-auto-email"
            type="text"
            name="user_email"
            className="w-full px-3 py-2 border border-border rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
          />
        </div>
        <div>
          <label htmlFor="bad-auto-phone" className="block text-sm font-medium text-foreground mb-1">
            Phone
          </label>
          <input
            id="bad-auto-phone"
            type="text"
            name="phone_number"
            className="w-full px-3 py-2 border border-border rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
          />
        </div>
        <button
          type="submit"
          className="w-full px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
        >
          Submit
        </button>
      </form>
      <p className="text-xs text-error mt-4">
        No autocomplete attributes. Browser can't autofill.
      </p>
    </div>
  );
}
```

## Good — do this

`forms-autocomplete-good`

```tsx
export function AutocompleteGood() {
  return (
    <div className="w-full max-w-sm">
      <form className="space-y-4">
        <div>
          <label htmlFor="good-auto-email" className="block text-sm font-medium text-foreground mb-1">
            Email
          </label>
          <input
            id="good-auto-email"
            type="email"
            name="email"
            autoComplete="email"
            className="w-full px-3 py-2 border border-border rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
          />
        </div>
        <div>
          <label htmlFor="good-auto-phone" className="block text-sm font-medium text-foreground mb-1">
            Phone
          </label>
          <input
            id="good-auto-phone"
            type="tel"
            name="tel"
            autoComplete="tel"
            className="w-full px-3 py-2 border border-border rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
          />
        </div>
        <button
          type="submit"
          className="w-full px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
        >
          Submit
        </button>
      </form>
      <p className="text-xs text-success mt-4">
        Proper autocomplete enables browser autofill.
      </p>
    </div>
  );
}
```

## References

- [HTML autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete)