UI Components Medium
Form — Smart address input (autocomplete)
A typeahead address field built on the ARIA combobox pattern that filters a fictional address list as you type, highlights matched substrings, and is fully keyboard-driven with arrow, Enter, Home, End and Escape. Selecting a suggestion auto-fills structured street, city, postcode and country fields, while an Enter manually toggle reveals the full set with live validation, inline errors, an error summary, and a confirmation state.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--brand: #5b5bf0;
--brand-d: #4646d6;
--brand-700: #3a3ab8;
--brand-50: #eef0ff;
--accent: #00b4a6;
--accent-soft: #d8f5f2;
--ink: #101322;
--ink-2: #3a4060;
--muted: #6c7393;
--bg: #f6f7fb;
--white: #ffffff;
--surface: #ffffff;
--line: rgba(16, 19, 34, 0.1);
--line-2: rgba(16, 19, 34, 0.16);
--ok: #2f9e6f;
--warn: #d98a2b;
--danger: #d4503e;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--sh-1: 0 1px 2px rgba(16, 19, 34, 0.08);
--sh-2: 0 8px 24px rgba(16, 19, 34, 0.08);
}
* {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, sans-serif;
line-height: 1.5;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
}
.card {
width: 100%;
max-width: 460px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--sh-2);
padding: 30px 28px;
}
.card__head {
margin-bottom: 22px;
}
.eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand);
background: var(--brand-50);
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 12px;
}
.card__head h1 {
margin: 0 0 6px;
font-size: 24px;
font-weight: 800;
letter-spacing: -0.02em;
}
.lede {
margin: 0;
color: var(--muted);
font-size: 14px;
}
/* ---------- Fields ---------- */
.field {
margin-bottom: 16px;
}
.field label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
margin-bottom: 7px;
}
.req {
color: var(--danger);
}
.help {
margin: 7px 0 0;
font-size: 12.5px;
color: var(--muted);
}
.help--error {
color: var(--danger);
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
}
.help--error::before {
content: "";
width: 14px;
height: 14px;
flex: none;
background: var(--danger);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v7h-2V7Zm0 9h2v2h-2v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v7h-2V7Zm0 9h2v2h-2v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type="text"],
select {
width: 100%;
font: inherit;
font-size: 15px;
color: var(--ink);
background: var(--white);
border: 1.5px solid var(--line-2);
border-radius: var(--r-md);
padding: 12px 14px;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
input[type="text"]::placeholder {
color: #9aa0bd;
}
input[type="text"]:hover:not(:disabled),
select:hover:not(:disabled) {
border-color: #b6bad4;
}
input[type="text"]:focus-visible,
select:focus-visible,
.combo__input:focus-visible {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 4px var(--brand-50);
}
input[aria-invalid="true"] {
border-color: var(--danger);
}
input[aria-invalid="true"]:focus-visible,
select[aria-invalid="true"]:focus-visible {
box-shadow: 0 0 0 4px rgba(212, 80, 62, 0.16);
}
input[data-valid="true"] {
border-color: var(--ok);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f9e6f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 13px center;
background-size: 16px;
padding-right: 38px;
}
input:disabled,
select:disabled {
background: #f1f2f7;
color: var(--muted);
cursor: not-allowed;
}
/* ---------- Combobox ---------- */
.combo {
position: relative;
}
.combo__icon {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--muted);
display: flex;
pointer-events: none;
transition: color 0.15s;
}
.combo[data-state="open"] .combo__icon {
color: var(--brand);
}
.combo__input {
width: 100%;
font: inherit;
font-size: 15px;
color: var(--ink);
background: var(--white);
border: 1.5px solid var(--line-2);
border-radius: var(--r-md);
padding: 12px 42px 12px 40px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.combo__input::placeholder {
color: #9aa0bd;
}
.combo__input:hover {
border-color: #b6bad4;
}
.combo__clear {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
display: grid;
place-items: center;
border: none;
border-radius: 999px;
background: #eceef5;
color: var(--ink-2);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.combo__clear:hover {
background: var(--brand-50);
color: var(--brand);
}
.combo__clear:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--brand-50);
}
.combo__list {
list-style: none;
margin: 8px 0 0;
padding: 6px;
position: absolute;
z-index: 20;
left: 0;
right: 0;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--sh-2);
max-height: 264px;
overflow-y: auto;
}
.combo__opt {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border-radius: var(--r-sm);
cursor: pointer;
color: var(--ink-2);
}
.combo__opt .pin {
flex: none;
margin-top: 2px;
color: var(--muted);
display: flex;
}
.combo__opt[aria-selected="true"] {
background: var(--brand-50);
color: var(--brand-700);
}
.combo__opt[aria-selected="true"] .pin {
color: var(--brand);
}
.combo__opt .ln1 {
font-size: 14.5px;
font-weight: 600;
color: var(--ink);
}
.combo__opt .ln2 {
font-size: 12.5px;
color: var(--muted);
}
.combo__opt mark {
background: transparent;
color: var(--brand);
font-weight: 700;
}
.combo__empty {
padding: 14px 12px;
font-size: 13.5px;
color: var(--muted);
text-align: center;
}
/* ---------- Manual toggle ---------- */
.manual-toggle {
display: flex;
align-items: baseline;
gap: 6px;
font-size: 13px;
margin: 4px 0 18px;
}
.manual-toggle__hint {
color: var(--muted);
}
.linkbtn {
border: none;
background: none;
padding: 0;
font: inherit;
font-size: 13px;
font-weight: 600;
color: var(--brand);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.linkbtn:hover {
color: var(--brand-d);
}
.linkbtn:focus-visible {
outline: none;
border-radius: 4px;
box-shadow: 0 0 0 3px var(--brand-50);
}
/* ---------- Structured fields ---------- */
.fields {
border: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 16px;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.32s ease, opacity 0.28s ease, margin 0.32s ease;
}
.fields[data-open="true"] {
max-height: 640px;
opacity: 1;
margin-bottom: 6px;
}
.field--full {
grid-column: 1 / -1;
}
.selectwrap {
position: relative;
}
.selectwrap select {
appearance: none;
-webkit-appearance: none;
padding-right: 40px;
cursor: pointer;
}
.selectwrap__chev {
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--muted);
pointer-events: none;
display: flex;
}
/* ---------- Error summary ---------- */
.summary {
background: #fdf0ee;
border: 1px solid rgba(212, 80, 62, 0.3);
border-radius: var(--r-md);
padding: 14px 16px;
margin-bottom: 16px;
font-size: 13.5px;
color: var(--danger);
}
.summary strong {
display: block;
margin-bottom: 6px;
}
.summary ul {
margin: 0;
padding-left: 18px;
}
.summary a {
color: var(--danger);
font-weight: 600;
}
.summary:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(212, 80, 62, 0.2);
}
/* ---------- Buttons ---------- */
.btn-primary {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font: inherit;
font-size: 15px;
font-weight: 700;
color: #fff;
background: var(--brand);
border: none;
border-radius: var(--r-md);
padding: 14px 18px;
cursor: pointer;
box-shadow: var(--sh-1);
transition: background 0.15s, transform 0.08s;
}
.btn-primary:hover {
background: var(--brand-d);
}
.btn-primary:active {
transform: translateY(1px);
}
.btn-primary:focus-visible {
outline: none;
box-shadow: 0 0 0 4px var(--brand-50);
}
.status {
margin: 12px 0 0;
min-height: 18px;
font-size: 13px;
font-weight: 500;
text-align: center;
color: var(--muted);
}
.status[data-tone="ok"] {
color: var(--ok);
}
.status[data-tone="err"] {
color: var(--danger);
}
/* ---------- Confirm card ---------- */
.confirm {
text-align: center;
}
.confirm__badge {
display: inline-grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent);
margin-bottom: 14px;
}
.confirm h2 {
margin: 0 0 4px;
font-size: 21px;
font-weight: 800;
}
.confirm__lede {
margin: 0 0 14px;
color: var(--muted);
font-size: 14px;
}
.confirm__addr {
font-style: normal;
text-align: left;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 16px 18px;
font-size: 14.5px;
line-height: 1.6;
color: var(--ink);
margin-bottom: 16px;
}
.confirm__addr .name {
font-weight: 700;
}
/* ---------- Toast ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%) translateY(12px);
background: var(--ink);
color: #fff;
font-size: 13.5px;
font-weight: 500;
padding: 11px 18px;
border-radius: 999px;
box-shadow: var(--sh-2);
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
pointer-events: none;
z-index: 60;
}
.toast[data-show="true"] {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ---------- Responsive ---------- */
@media (max-width: 520px) {
.page {
padding: 22px 14px;
}
.card {
padding: 24px 18px;
border-radius: var(--r-md);
}
.card__head h1 {
font-size: 21px;
}
.fields {
grid-template-columns: 1fr;
gap: 0;
}
}
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
}
}(function () {
"use strict";
// Fictional address database
var ADDRESSES = [
{ street: "18 Marlowe Crescent", city: "Brighton", postcode: "BN1 4QT", country: "United Kingdom" },
{ street: "204 Sefton Park Road", city: "Liverpool", postcode: "L8 3SD", country: "United Kingdom" },
{ street: "7 Camden Lock Place", city: "London", postcode: "NW1 8AF", country: "United Kingdom" },
{ street: "33 Grafton Street", city: "Dublin", postcode: "D02 X285", country: "Ireland" },
{ street: "12 Quayside Walk", city: "Bristol", postcode: "BS1 5TY", country: "United Kingdom" },
{ street: "9 Rue des Abbesses", city: "Paris", postcode: "75018", country: "France" },
{ street: "41 Prinsengracht", city: "Amsterdam", postcode: "1015 DK", country: "Netherlands" },
{ street: "5 Calle de Toledo", city: "Madrid", postcode: "28005", country: "Spain" },
{ street: "88 Schönhauser Allee", city: "Berlin", postcode: "10437", country: "Germany" },
{ street: "27 Heaton Moor Road", city: "Manchester", postcode: "M19 2NP", country: "United Kingdom" },
{ street: "150 Royal Mile", city: "Edinburgh", postcode: "EH1 1PW", country: "United Kingdom" },
{ street: "62 Magdalen Street", city: "Oxford", postcode: "OX1 3AB", country: "United Kingdom" },
];
var POSTCODE_RE = /^[A-Za-z0-9][A-Za-z0-9 -]{1,9}$/;
var $ = function (id) {
return document.getElementById(id);
};
var form = $("address-form");
var input = $("ac-input");
var listbox = $("ac-listbox");
var clearBtn = document.querySelector(".combo__clear");
var combo = document.querySelector(".combo");
var manualBtn = $("manual-btn");
var manualHint = $("manual-hint");
var fieldset = $("manual-fields");
var summary = $("error-summary");
var summaryList = $("summary-list");
var statusEl = $("form-status");
var confirmCard = $("confirm-card");
var confirmAddr = $("confirm-addr");
var editBtn = $("edit-btn");
var toastEl = $("toast");
var fields = {
street: $("f-street"),
city: $("f-city"),
postcode: $("f-postcode"),
country: $("f-country"),
};
var labels = {
street: "Street address",
city: "City",
postcode: "Postcode",
country: "Country",
};
var activeIdx = -1;
var current = [];
var manualOpen = false;
var toastTimer;
/* ---------- toast ---------- */
function toast(msg) {
toastEl.textContent = msg;
toastEl.hidden = false;
// force reflow so transition runs
void toastEl.offsetWidth;
toastEl.setAttribute("data-show", "true");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.setAttribute("data-show", "false");
setTimeout(function () {
toastEl.hidden = true;
}, 220);
}, 2200);
}
/* ---------- highlight ---------- */
function escapeRe(s) {
return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}
function highlight(text, query) {
if (!query) return text;
var re = new RegExp("(" + escapeRe(query) + ")", "gi");
return text.replace(re, "<mark>$1</mark>");
}
function pinSvg() {
return (
'<span class="pin">' +
'<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
'<path d="M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0Z"/><circle cx="12" cy="10" r="3"/></svg></span>'
);
}
/* ---------- combobox ---------- */
function openList(items, query) {
listbox.innerHTML = "";
activeIdx = -1;
current = items;
if (items.length === 0) {
var empty = document.createElement("li");
empty.className = "combo__empty";
empty.textContent = "No matching address — try “Enter manually”.";
empty.setAttribute("role", "presentation");
listbox.appendChild(empty);
} else {
items.forEach(function (addr, i) {
var li = document.createElement("li");
li.className = "combo__opt";
li.id = "ac-opt-" + i;
li.setAttribute("role", "option");
li.setAttribute("aria-selected", "false");
li.innerHTML =
pinSvg() +
"<span><span class='ln1'>" +
highlight(addr.street, query) +
"</span><br><span class='ln2'>" +
highlight(addr.city + ", " + addr.postcode, query) +
" · " +
addr.country +
"</span></span>";
li.addEventListener("mousedown", function (e) {
e.preventDefault();
choose(i);
});
listbox.appendChild(li);
});
}
listbox.hidden = false;
input.setAttribute("aria-expanded", "true");
combo.setAttribute("data-state", "open");
}
function closeList() {
listbox.hidden = true;
input.setAttribute("aria-expanded", "false");
input.removeAttribute("aria-activedescendant");
combo.setAttribute("data-state", "idle");
activeIdx = -1;
}
function setActive(idx) {
var opts = listbox.querySelectorAll(".combo__opt");
opts.forEach(function (o) {
o.setAttribute("aria-selected", "false");
});
if (idx < 0 || idx >= opts.length) {
activeIdx = -1;
input.removeAttribute("aria-activedescendant");
return;
}
activeIdx = idx;
var el = opts[idx];
el.setAttribute("aria-selected", "true");
input.setAttribute("aria-activedescendant", el.id);
el.scrollIntoView({ block: "nearest" });
}
function filter(q) {
var lower = q.toLowerCase();
return ADDRESSES.filter(function (a) {
return (
a.street.toLowerCase().indexOf(lower) > -1 ||
a.city.toLowerCase().indexOf(lower) > -1 ||
a.postcode.toLowerCase().indexOf(lower) > -1
);
});
}
function choose(i) {
var addr = current[i];
if (!addr) return;
input.value = addr.street + ", " + addr.city;
clearBtn.hidden = false;
fields.street.value = addr.street;
fields.city.value = addr.city;
fields.postcode.value = addr.postcode;
fields.country.value = addr.country;
closeList();
if (!manualOpen) setManual(true, false);
Object.keys(fields).forEach(function (k) {
validateField(k);
});
clearSummary();
toast("Address filled — check the details.");
}
/* ---------- manual toggle ---------- */
function setManual(open, announce) {
manualOpen = open;
fieldset.setAttribute("data-open", open ? "true" : "false");
manualBtn.setAttribute("aria-expanded", open ? "true" : "false");
manualBtn.textContent = open ? "Hide fields" : "Enter manually";
manualHint.textContent = open ? "Edit any field:" : "Can’t find it?";
if (open && announce) {
fields.street.focus();
}
}
/* ---------- validation ---------- */
function validateField(key) {
var el = fields[key];
var val = el.value.trim();
var msg = "";
if (!val) {
msg = labels[key] + " is required.";
} else if (key === "postcode" && !POSTCODE_RE.test(val)) {
msg = "Enter a valid postcode.";
} else if (key === "street" && val.length < 4) {
msg = "Street address looks too short.";
}
var errEl = $("e-" + key);
if (msg) {
el.setAttribute("aria-invalid", "true");
el.removeAttribute("data-valid");
errEl.textContent = msg;
errEl.hidden = false;
return false;
}
el.removeAttribute("aria-invalid");
el.setAttribute("data-valid", "true");
errEl.textContent = "";
errEl.hidden = true;
return true;
}
function clearSummary() {
summary.hidden = true;
summaryList.innerHTML = "";
}
function showSummary(errors) {
summaryList.innerHTML = "";
errors.forEach(function (key) {
var li = document.createElement("li");
var a = document.createElement("a");
a.href = "#f-" + key;
a.textContent = labels[key];
a.addEventListener("click", function (e) {
e.preventDefault();
if (!manualOpen) setManual(true, false);
fields[key].focus();
});
li.appendChild(a);
summaryList.appendChild(li);
});
summary.hidden = false;
summary.focus();
}
function setStatus(msg, tone) {
statusEl.textContent = msg;
if (tone) statusEl.setAttribute("data-tone", tone);
else statusEl.removeAttribute("data-tone");
}
/* ---------- events ---------- */
input.addEventListener("input", function () {
var q = input.value.trim();
clearBtn.hidden = q.length === 0;
if (q.length < 2) {
closeList();
return;
}
openList(filter(q), q);
});
input.addEventListener("focus", function () {
var q = input.value.trim();
if (q.length >= 2) openList(filter(q), q);
});
input.addEventListener("keydown", function (e) {
var opts = listbox.querySelectorAll(".combo__opt");
if (listbox.hidden && e.key === "ArrowDown") {
e.preventDefault();
input.dispatchEvent(new Event("input"));
return;
}
if (listbox.hidden) return;
switch (e.key) {
case "ArrowDown":
e.preventDefault();
setActive(Math.min(activeIdx + 1, opts.length - 1));
break;
case "ArrowUp":
e.preventDefault();
setActive(activeIdx <= 0 ? opts.length - 1 : activeIdx - 1);
break;
case "Home":
if (opts.length) {
e.preventDefault();
setActive(0);
}
break;
case "End":
if (opts.length) {
e.preventDefault();
setActive(opts.length - 1);
}
break;
case "Enter":
if (activeIdx >= 0) {
e.preventDefault();
choose(activeIdx);
}
break;
case "Escape":
closeList();
break;
case "Tab":
closeList();
break;
}
});
input.addEventListener("blur", function () {
setTimeout(closeList, 140);
});
clearBtn.addEventListener("click", function () {
input.value = "";
clearBtn.hidden = true;
closeList();
input.focus();
});
manualBtn.addEventListener("click", function () {
setManual(!manualOpen, true);
});
Object.keys(fields).forEach(function (key) {
var el = fields[key];
var evt = key === "country" ? "change" : "blur";
el.addEventListener(evt, function () {
if (el.getAttribute("aria-invalid") === "true" || el.value.trim()) {
validateField(key);
}
});
el.addEventListener("input", function () {
if (el.getAttribute("aria-invalid") === "true") validateField(key);
});
});
form.addEventListener("submit", function (e) {
e.preventDefault();
closeList();
if (!manualOpen) setManual(true, false);
var errors = [];
Object.keys(fields).forEach(function (key) {
if (!validateField(key)) errors.push(key);
});
if (errors.length) {
showSummary(errors);
setStatus(errors.length + " field" + (errors.length > 1 ? "s" : "") + " need attention.", "err");
return;
}
clearSummary();
setStatus("");
var addr = {
street: fields.street.value.trim(),
city: fields.city.value.trim(),
postcode: fields.postcode.value.trim(),
country: fields.country.value,
};
confirmAddr.innerHTML =
"<span class='name'>Jordan Avery</span><br>" +
addr.street +
"<br>" +
addr.city +
", " +
addr.postcode +
"<br>" +
addr.country;
form.hidden = true;
confirmCard.hidden = false;
confirmCard.scrollIntoView({ behavior: "smooth", block: "center" });
editBtn.focus();
toast("Address confirmed ✓");
});
editBtn.addEventListener("click", function () {
confirmCard.hidden = true;
form.hidden = false;
setStatus("");
input.focus();
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Smart address input</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="page">
<form class="card" id="address-form" novalidate>
<header class="card__head">
<span class="eyebrow">Shipping details</span>
<h1>Where should we deliver?</h1>
<p class="lede">
Start typing your address and pick a match — we’ll fill in the rest.
</p>
</header>
<!-- Autocomplete combobox -->
<div class="field">
<label for="ac-input" id="ac-label">
Search address <span class="req" aria-hidden="true">*</span>
</label>
<div class="combo" data-state="idle">
<span class="combo__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0Z" />
<circle cx="12" cy="10" r="3" />
</svg>
</span>
<input
id="ac-input"
class="combo__input"
type="text"
role="combobox"
autocomplete="off"
autocapitalize="off"
spellcheck="false"
aria-expanded="false"
aria-controls="ac-listbox"
aria-autocomplete="list"
aria-describedby="ac-help"
placeholder="e.g. 18 Marlowe Crescent"
/>
<button type="button" class="combo__clear" aria-label="Clear address search" hidden>
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
<path d="M18 6 6 18M6 6l12 12" />
</svg>
</button>
<ul id="ac-listbox" class="combo__list" role="listbox" aria-labelledby="ac-label" hidden></ul>
</div>
<p class="help" id="ac-help">We never store partial searches.</p>
</div>
<div class="manual-toggle">
<span class="manual-toggle__hint" id="manual-hint">Can’t find it?</span>
<button type="button" class="linkbtn" id="manual-btn" aria-expanded="false" aria-controls="manual-fields">
Enter manually
</button>
</div>
<!-- Structured fields -->
<fieldset class="fields" id="manual-fields" data-open="false">
<legend class="sr-only">Address details</legend>
<div class="field field--full">
<label for="f-street">Street address <span class="req" aria-hidden="true">*</span></label>
<input id="f-street" name="street" type="text" autocomplete="street-address"
aria-describedby="e-street" placeholder="Street and number" />
<p class="help help--error" id="e-street" hidden></p>
</div>
<div class="field">
<label for="f-city">City <span class="req" aria-hidden="true">*</span></label>
<input id="f-city" name="city" type="text" autocomplete="address-level2"
aria-describedby="e-city" placeholder="City" />
<p class="help help--error" id="e-city" hidden></p>
</div>
<div class="field">
<label for="f-postcode">Postcode <span class="req" aria-hidden="true">*</span></label>
<input id="f-postcode" name="postcode" type="text" autocomplete="postal-code"
aria-describedby="e-postcode" placeholder="Postcode" inputmode="text" />
<p class="help help--error" id="e-postcode" hidden></p>
</div>
<div class="field field--full">
<label for="f-country">Country <span class="req" aria-hidden="true">*</span></label>
<div class="selectwrap">
<select id="f-country" name="country" autocomplete="country-name" aria-describedby="e-country">
<option value="">Select a country…</option>
<option>United Kingdom</option>
<option>Ireland</option>
<option>France</option>
<option>Germany</option>
<option>Spain</option>
<option>Netherlands</option>
</select>
<span class="selectwrap__chev" aria-hidden="true">
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
</span>
</div>
<p class="help help--error" id="e-country" hidden></p>
</div>
</fieldset>
<!-- Error summary (focus target) -->
<div class="summary" id="error-summary" role="alert" tabindex="-1" hidden>
<strong>Please fix the highlighted fields.</strong>
<ul id="summary-list"></ul>
</div>
<button type="submit" class="btn-primary">
<span>Confirm address</span>
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
</button>
<p class="status" id="form-status" role="status" aria-live="polite"></p>
</form>
<!-- Success state -->
<section class="card confirm" id="confirm-card" hidden aria-live="polite">
<span class="confirm__badge" aria-hidden="true">
<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
</span>
<h2>Address confirmed</h2>
<p class="confirm__lede">We’ll ship your order here:</p>
<address class="confirm__addr" id="confirm-addr"></address>
<button type="button" class="linkbtn" id="edit-btn">Edit address</button>
</section>
</main>
<div class="toast" id="toast" role="status" aria-live="polite" hidden></div>
<script src="script.js"></script>
</body>
</html>Smart address input (autocomplete)
A shipping form that leads with a single search field. As you type two or more characters, a suggestion dropdown filters a fictional address list and highlights the matched text. The field follows the ARIA combobox pattern — role="combobox" with aria-expanded, aria-controls, aria-autocomplete, and a live aria-activedescendant — so arrow keys move the highlight, Enter selects, Home/End jump to the ends, and Escape closes the list.
Picking a suggestion auto-fills the structured fields (street, city, postcode, country), opens them for review, and confirms with a toast. An “Enter manually” toggle expands the same field set for addresses that aren’t in the list. Every field has a label, placeholder, helper text, a required marker, and real validation: blur and submit checks set aria-invalid, render inline error messages wired via aria-describedby, and mark valid fields with a success state.
On submit, any failures populate a role="alert" error summary whose links focus the offending field, and a polite aria-live status announces the count. A clean form swaps to a confirmation card showing the finalized address, with an Edit button to return — no fake submit, fully keyboard-usable, and responsive down to 360px.