Make errors specific and easy to find, with a clear distinction between validation and delivery.
HTML + CSS + JavaScript
Core pattern
Try the example aria-invalid="true" Forms · Complete runnable example
Dependent native select fields
Keep collection, item, and finish choices consistent as their parents change.
This preview runs in an isolated document. Clipboard writes and saved preferences may be blocked, and printing requires the standalone file. A dialog affects only the example. Reset reloads the original example state.
When to use it
Use dependent selects when each available choice comes from a small known parent selection. This example uses an original fictional stationery catalog without loading data or placing an order.
Try the important details
- Choose Paper goods, Notebook, and Cloud. Then change the collection to Desk objects.
- Confirm both stale descendants clear, then choose Tray and Oak.
- Reset the choices and check that focus returns to the first select while children are disabled.
How it works
- Each native select has a visible associated label. Child selects stay disabled until valid options exist.
- Changing a collection clears both descendants; changing an item clears its finish. Options use createElement and textContent.
- The selected result comes only from the local catalog and the reset action restores the initial prompts.
The complete source
The preview, copied text, and downloaded file use this same document.
HTML
<!doctype html>
<!--
MIT License
Copyright (c) 2026 MRHTML
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data: blob:; connect-src 'none'; form-action 'none'; object-src 'none'; base-uri 'none'"
/>
<title>One choice leads to another. | MRHTML example</title>
<style>
:root {
color-scheme: light;
--ink: #202b36;
--muted: #596675;
--line: #d5dde4;
--blue: #2349c8;
--pale: #edf1ff;
--paper: #fff;
--danger: #a32b30;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
body {
margin: 0;
min-width: 0;
padding: 42px 22px;
background: #f2f4f7;
color: var(--ink);
line-height: 1.55;
}
main {
max-width: 690px;
margin: auto;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 25px;
color: var(--muted);
font-size: 12px;
letter-spacing: 0.04em;
}
.brand b {
color: var(--ink);
letter-spacing: -0.05em;
font-size: 17px;
}
.brand b span {
color: var(--blue);
}
.brand i {
flex: 1;
height: 1px;
background: var(--line);
}
.card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 18px;
padding: 32px;
box-shadow: 0 12px 36px #263a5110;
}
.eyebrow {
margin: 0 0 12px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--blue);
}
h1 {
font-size: clamp(29px, 5vw, 38px);
line-height: 1.13;
letter-spacing: -0.04em;
margin: 0 0 14px;
}
h2 {
font-size: 20px;
line-height: 1.3;
margin: 0 0 14px;
}
p {
margin: 0 0 18px;
}
.intro {
color: var(--muted);
max-width: 55ch;
}
.hint,
.small {
font-size: 13px;
color: var(--muted);
}
.hint {
margin: 9px 0 0;
}
.footer {
font-size: 12px;
color: var(--muted);
margin: 20px 2px 0;
}
label,
legend {
font-weight: 700;
font-size: 14px;
}
label.field {
display: block;
margin: 18px 0 7px;
}
fieldset {
min-width: 0;
margin: 22px 0;
padding: 20px;
border: 1px solid var(--line);
border-radius: 10px;
}
legend {
padding: 0 7px;
}
input,
select,
textarea,
button {
font: inherit;
}
input:not([type='checkbox']):not([type='radio']),
select,
textarea {
width: 100%;
min-width: 0;
color: var(--ink);
background: #fff;
border: 1px solid #8896a5;
border-radius: 7px;
padding: 11px 12px;
font-size: 16px;
}
input[type='checkbox'],
input[type='radio'] {
accent-color: var(--blue);
width: 18px;
height: 18px;
flex: none;
}
textarea {
display: block;
resize: vertical;
}
button {
border: 1px solid var(--blue);
border-radius: 7px;
min-height: 44px;
padding: 10px 17px;
background: var(--blue);
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
button.secondary {
background: #fff;
color: var(--blue);
}
button:disabled {
cursor: default;
opacity: 0.55;
}
input:disabled,
select:disabled {
background: #f0f2f5;
color: #596675;
}
:focus-visible {
outline: 3px solid #d46a20;
outline-offset: 3px;
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.status {
margin: 18px 0 0;
font-size: 14px;
min-height: 1.6em;
}
.error {
color: var(--danger);
}
.panel {
background: var(--pale);
padding: 20px;
border-radius: 10px;
margin-top: 24px;
}
.panel p:last-child {
margin-bottom: 0;
}
.row {
display: flex;
gap: 12px;
align-items: center;
}
.sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
noscript p {
border-left: 3px solid #9b6300;
background: #fff4d6;
padding: 12px;
font-size: 14px;
margin-top: 20px;
}
code {
overflow-wrap: anywhere;
}
@media (max-width: 450px) {
body {
padding: 25px 14px;
}
.card {
padding: 23px 19px;
border-radius: 13px;
}
fieldset {
padding: 16px 13px;
}
.brand {
margin-bottom: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
.select-grid {
border-top: 1px solid var(--line);
padding-top: 5px;
margin-top: 24px;
}
.select-grid > div {
display: grid;
grid-template-columns: 145px 1fr;
gap: 14px;
align-items: center;
margin-top: 17px;
}
.select-grid label.field {
margin: 0;
}
@media (max-width: 500px) {
.select-grid > div {
grid-template-columns: 1fr;
gap: 7px;
}
}
</style>
</head>
<body>
<main>
<p class="brand">
<b>MR<span>HTML</span></b
><span>THE INTERACTION NOTEBOOK</span><i aria-hidden="true"></i>
</p>
<section class="card" aria-labelledby="title">
<p class="eyebrow">03 / Dependent selects</p>
<h1 id="title">One choice leads to another.</h1>
<p class="intro">
Explore a small fictional stationery catalog. Changing a parent
selection clears choices that no longer belong.
</p>
<div class="select-grid">
<div>
<label class="field" for="collection">1. Collection</label
><select id="collection" disabled>
<option value="">Choose a collection</option>
<option value="paper">Paper goods</option>
<option value="desk">Desk objects</option>
</select>
</div>
<div>
<label class="field" for="item">2. Item</label
><select id="item" disabled>
<option value="">Choose a collection first</option>
</select>
</div>
<div>
<label class="field" for="finish">3. Finish</label
><select id="finish" disabled>
<option value="">Choose an item first</option>
</select>
</div>
</div>
<div class="panel">
<p class="eyebrow">YOUR LOCAL SELECTION</p>
<p id="selection" role="status">Choose a collection to begin.</p>
</div>
<div class="actions">
<button type="button" class="secondary" id="reset-selects" disabled>
Reset choices
</button>
</div>
<noscript
><p>
The local choices require JavaScript. The sample catalog contains
Paper goods (Notebook or Postcards) and Desk objects (Tray or Pencil
cup). No order is placed.
</p></noscript
>
</section>
<p class="footer">A local MRHTML example. Nothing is sent or saved.</p>
</main>
<script>
(function () {
'use strict';
var catalog = {
paper: {
label: 'Paper goods',
items: {
notebook: { label: 'Notebook', finishes: ['Cloud', 'Ochre'] },
postcards: {
label: 'Postcards',
finishes: ['Botanical', 'Geometric'],
},
},
},
desk: {
label: 'Desk objects',
items: {
tray: { label: 'Tray', finishes: ['Oak', 'Graphite'] },
cup: { label: 'Pencil cup', finishes: ['Clay', 'Chalk'] },
},
},
};
var collection = document.getElementById('collection'),
item = document.getElementById('item'),
finish = document.getElementById('finish'),
status = document.getElementById('selection'),
reset = document.getElementById('reset-selects');
function populate(select, placeholder, entries) {
select.replaceChildren();
var blank = document.createElement('option');
blank.value = '';
blank.textContent = placeholder;
select.append(blank);
entries.forEach(function (entry) {
var option = document.createElement('option');
option.value = entry[0];
option.textContent = entry[1];
select.append(option);
});
select.disabled = entries.length === 0;
}
function resetFinish() {
populate(finish, 'Choose an item first', []);
}
collection.addEventListener('change', function () {
var group = catalog[collection.value];
populate(
item,
group ? 'Choose an item' : 'Choose a collection first',
group
? Object.entries(group.items).map(function (pair) {
return [pair[0], pair[1].label];
})
: [],
);
resetFinish();
status.textContent = group
? 'Now choose an item.'
: 'Choose a collection to begin.';
});
item.addEventListener('change', function () {
var group = catalog[collection.value];
var entry = group && group.items[item.value];
populate(
finish,
entry ? 'Choose a finish' : 'Choose an item first',
entry
? entry.finishes.map(function (label) {
return [label, label];
})
: [],
);
status.textContent = entry
? 'Now choose a finish.'
: 'Choose an item to continue.';
});
finish.addEventListener('change', function () {
var group = catalog[collection.value],
entry = group && group.items[item.value];
status.textContent =
entry && entry.finishes.includes(finish.value)
? group.label + ' / ' + entry.label + ' / ' + finish.value
: 'Choose a finish to complete the local selection.';
});
reset.addEventListener('click', function () {
collection.value = '';
populate(item, 'Choose a collection first', []);
resetFinish();
status.textContent = 'Choices reset. Choose a collection to begin.';
collection.focus();
});
collection.disabled = false;
reset.disabled = false;
})();
</script>
</body>
</html>