Design Atlas
한국어
⌘ UX terms & laws

Postel's Law

포스텔의 법칙

Be conservative in what you send, liberal in what you accept — interfaces should tolerate varied input but emit only clean, consistent output.

Also known as: Robustness principleBe liberal in what you accept
···
html
<div class="stage">
  <div class="pane"><div class="tag">A</div>
    <div class="inp" id="ia">010-1234-5678</div>
    <svg class="ico bad" id="xa" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke-width="3" fill="none" stroke-linecap="round"/></svg>
  </div>
  <div class="pane"><div class="tag">B</div>
    <div class="inp" id="ib">010-1234-5678</div>
    <svg class="ico ok" id="ok" viewBox="0 0 24 24"><path d="M4 13l5 5L20 6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <div class="norm" id="norm">010-1234-5678</div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;gap:10px;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.inp{font:700 clamp(11px,2.6vmin,15px)/1 monospace;color:var(--fg);padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg)}
.ico{width:24px;height:24px}
.ico path{stroke:currentColor}
.bad{color:var(--accent-2);opacity:.85;animation:pulsebad 2s ease-in-out infinite}
.ok{color:var(--accent-3);opacity:.85;animation:pulseok 2s ease-in-out infinite}
@keyframes pulsebad{0%,100%{opacity:.85;transform:scale(1)}20%,45%{opacity:1;transform:scale(1.25)}}
@keyframes pulseok{0%,100%{opacity:.85;transform:scale(1)}30%,60%{opacity:1;transform:scale(1.25)}}
.norm{font:700 11px/1 monospace;color:var(--accent-3);opacity:.9}
js
const variants = ['010-1234-5678', '01012345678', '010 1234 5678'];
const ia = document.getElementById('ia'), ib = document.getElementById('ib');
let i = 0;
setInterval(() => {
  i = (i + 1) % variants.length;
  ia.textContent = variants[i];
  ib.textContent = variants[i];
}, 2000);

Coined by Jon Postel in the 1980 TCP specification, RFC 761. It began as a network protocol principle but maps directly onto form input design.

A form that only accepts "010-1234-5678" rejects "01012345678" or "010 1234 5678" every time. A liberal form extracts the digits, normalizes internally, and simply confirms it understood.

Leniency isn't unlimited — widen what you accept, but always normalize to one clean format before storing or sending it, or you'll be parsing edge cases forever.

A rejects anything slightly off-format on repeat; B accepts three different inputs and reduces them all to the same normalized number.

When to use

Use this for phone numbers, dates, URLs — anything users might type in several valid formats. Before writing a strict regex, ask whether that one format is really the only valid one.