# Placeholder Value

**SHOULD** · **ID:** `forms-placeholder-value` · **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-placeholder-value

> SHOULD: Placeholders end with ellipsis and show example pattern (eg, `+1 (123) 456-7890`, `sk-012345…`)

Set placeholder to an example value or pattern, ending with ellipsis

Placeholders should show example values, not labels (that's what <label> is for). The ellipsis signals that the value continues or represents a pattern. For example: "name@example.com" or "sk-proj_abc123…"

## Bad — do not do this

`forms-placeholder-value-bad`

```tsx
export function PlaceholderValueBad() {
  return (
    <div className="w-full max-w-sm">
      <form className="space-y-4">
        <div>
          <label htmlFor="bad-placeholder-phone" className="block text-sm font-medium text-foreground mb-1">
            Phone Number
          </label>
          <input
            id="bad-placeholder-phone"
            type="tel"
            placeholder="Enter 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>
        <div>
          <label htmlFor="bad-placeholder-key" className="block text-sm font-medium text-foreground mb-1">
            API Key
          </label>
          <input
            id="bad-placeholder-key"
            type="text"
            placeholder="API Key"
            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">
        Placeholders repeat labels without showing format
      </p>
    </div>
  );
}
```

## Good — do this

`forms-placeholder-value-good`

```tsx
export function PlaceholderValueGood() {
  return (
    <div className="w-full max-w-sm">
      <form className="space-y-4">
        <div>
          <label htmlFor="good-placeholder-phone" className="block text-sm font-medium text-foreground mb-1">
            Phone Number
          </label>
          <input
            id="good-placeholder-phone"
            type="tel"
            placeholder="+1 (555) 123-4567"
            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-placeholder-key" className="block text-sm font-medium text-foreground mb-1">
            API Key
          </label>
          <input
            id="good-placeholder-key"
            type="text"
            placeholder="sk-proj_abc123…"
            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">
        Placeholders show example patterns with ellipsis
      </p>
    </div>
  );
}
```

## References

- [Placeholder vs Label](https://www.nngroup.com/articles/form-design-placeholders/)