# Correct Types & Input Modes

**MUST** · **ID:** `forms-correct-types` · **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-correct-types

> MUST: Use correct `type` and `inputmode` for better keyboards & validation

Use the right type and inputmode for better keyboards and validation

Mobile devices show different keyboards based on the input type and inputmode. Use type="email" for emails, type="tel" for phones, inputmode="numeric" for numbers, etc. This provides users with the most relevant keyboard layout.

## Bad — do not do this

`forms-correct-types-bad`

```tsx
export function CorrectTypesBad() {
  return (
    <div className="w-full max-w-sm">
      <form className="space-y-4">
        <div>
          <label htmlFor="bad-types-email" className="block text-sm font-medium text-foreground mb-1">
            Email
          </label>
          <input
            id="bad-types-email"
            type="text"
            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-types-phone" className="block text-sm font-medium text-foreground mb-1">
            Phone
          </label>
          <input
            id="bad-types-phone"
            type="text"
            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-types-amount" className="block text-sm font-medium text-foreground mb-1">
            Amount
          </label>
          <input
            id="bad-types-amount"
            type="text"
            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>
      </form>
      <p className="text-xs text-error mt-4">
        Generic text type. Mobile shows standard keyboard.
      </p>
    </div>
  );
}
```

## Good — do this

`forms-correct-types-good`

```tsx
export function CorrectTypesGood() {
  return (
    <div className="w-full max-w-sm">
      <form className="space-y-4">
        <div>
          <label htmlFor="good-types-email" className="block text-sm font-medium text-foreground mb-1">
            Email
          </label>
          <input
            id="good-types-email"
            type="email"
            inputMode="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-types-phone" className="block text-sm font-medium text-foreground mb-1">
            Phone
          </label>
          <input
            id="good-types-phone"
            type="tel"
            inputMode="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>
        <div>
          <label htmlFor="good-types-amount" className="block text-sm font-medium text-foreground mb-1">
            Amount
          </label>
          <input
            id="good-types-amount"
            type="text"
            inputMode="decimal"
            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>
      </form>
      <p className="text-xs text-success mt-4">
        Correct types show optimized mobile keyboards
      </p>
    </div>
  );
}
```

## References

- [HTML input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input)
- [inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode)