# Mobile Input Size

**MUST** · **ID:** `interactions-mobile-input-size` · **Category:** interactions
**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/interactions-mobile-input-size

> MUST: Mobile `<input>` font-size ≥16px or set:
```html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
```

Input font size must be at least 16px on mobile to prevent zoom

iOS Safari automatically zooms when focusing inputs with font-size below 16px, causing disorienting page shifts. Either set font-size to 16px or larger, or use the viewport meta tag to control zoom behavior.

## Bad — do not do this

`interactions-mobile-input-size-bad`

```tsx
export function MobileInputSizeBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <label className="block text-sm font-medium text-foreground mb-2">
          Email Address
        </label>
        <input
          type="email"
          placeholder="name@example.com"
          className="w-full px-3 py-2 border border-border rounded-lg focus:outline-hidden focus:ring-2 focus:ring-ring"
          style={{ fontSize: '14px' }}
        />
        <p className="mt-2 text-xs text-muted-foreground">
          On iOS Safari, tapping this input causes the page to zoom in because the font size is below 16px.
        </p>
      </div>
      <p className="text-xs text-error mt-4">
        14px font size causes iOS Safari to auto-zoom on focus
      </p>
    </div>
  );
}
```

## Good — do this

`interactions-mobile-input-size-good`

```tsx
export function MobileInputSizeGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <label className="block text-sm font-medium text-foreground mb-2">
          Email Address
        </label>
        <input
          type="email"
          placeholder="name@example.com"
          className="w-full px-3 py-2 border border-border rounded-lg text-base focus:outline-hidden focus:ring-2 focus:ring-ring"
        />
        <p className="mt-2 text-xs text-muted-foreground">
          Font size is 16px (text-base), so iOS Safari won't auto-zoom when this input is focused.
        </p>
      </div>
      <p className="text-xs text-success mt-4">
        16px font size prevents iOS Safari auto-zoom on focus
      </p>
    </div>
  );
}
```

## References

- [Preventing Mobile Zoom](https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone)