Responsive disclosure navigation
NavigationA navigation bar that folds neatly into a keyboard-friendly disclosure on small screens.
HTML + CSS + JavaScript
Core pattern
Try the example aria-expanded="false" The MRHTML pattern collection
Small patterns.
Thoughtful details.
35 useful interface patterns, with the details that make them work: focus, keyboard controls, responsive layouts, and clear feedback. Try each example, inspect the full source, and adapt it to your project.
02 / Pattern collection
Layout
Let the browser adapt the layout to the available space.
Responsive card grid
LayoutCards that find their own column count, with useful minimum widths and no layout script.
HTML + CSS · No JavaScript
Core pattern
Try the example repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) Manual scroll-snap carousel
LayoutA horizontal collection that moves only when the reader asks it to.
HTML + CSS + JavaScript
Core pattern
Try the example scroll-snap-type: x mandatory Let the browser select an image composition and inspect its choice.
HTML + CSS + JavaScript
Core pattern
Try the example <picture><source media="…" srcset="…"> Standalone print document
LayoutPrepare a readable paper layout without claiming that printing succeeded.
HTML + CSS + JavaScript
Core pattern
Try the example @media print { .print-notes { break-before: page; } } Give two panels flexible room with a clear resize boundary.
HTML + CSS + JavaScript
Core pattern
Try the example role="separator" aria-valuenow="45" 03 / Pattern collection
Interaction
Use native behavior where it helps, and make custom state changes explicit.
Native details FAQ
InteractionA practical FAQ built from native disclosure controls that work without JavaScript.
HTML + CSS · No JavaScript
Core pattern
Try the example <details><summary>Question</summary>…</details> Native modal dialog
InteractionA focused dialog using the browser’s built-in modal behavior and clear close controls.
HTML + CSS + JavaScript
Core pattern
Try the example dialog.showModal() System, light, and dark themes
InteractionLet readers follow their system preference or choose a light or dark appearance.
HTML + CSS + JavaScript
Core pattern
Try the example matchMedia("(prefers-color-scheme: dark)") Clipboard button with honest feedback
InteractionOnly report a successful copy after the clipboard promise resolves.
HTML + CSS + JavaScript
Core pattern
Try the example await navigator.clipboard.writeText(text) Stable sortable table
InteractionSort the rows already on the page while preserving ties and explaining the current order.
HTML + CSS + JavaScript
Core pattern
Try the example header.setAttribute('aria-sort', 'ascending') Keyboard action menu
InteractionA compact menu for commands with deliberate opening, dismissal, and focus behavior.
HTML + CSS + JavaScript
Core pattern
Try the example aria-haspopup="menu" Reorderable list with move buttons
InteractionMove items with explicit buttons instead of requiring a drag gesture.
HTML + CSS + JavaScript
Core pattern
Try the example list.insertBefore(item, previousItem) Dismissible focus and hover tooltip
InteractionOffer extra context without hiding essential instructions or moving focus into a popup.
HTML + CSS + JavaScript
Core pattern
Try the example aria-describedby="tip-local" Async button state simulation
InteractionShow the full lifecycle of a local action without pretending to call a server.
HTML + CSS + JavaScript
Core pattern
Try the example surface.setAttribute("aria-busy", "true") Persistent toast queue
InteractionKeep up to three messages visible until the reader dismisses them.
HTML + CSS + JavaScript
Core pattern
Try the example role="status" aria-atomic="true" Native range image comparison
InteractionReveal a color treatment over the same tonal illustration.
HTML + CSS + JavaScript
Core pattern
Try the example <input type="range" min="0" max="100"> Pausable duration countdown
InteractionA timer the reader starts and controls, without urgency or automatic actions.
HTML + CSS + JavaScript
Core pattern
Try the example remaining = Math.max(0, deadline - Date.now()) 04 / Pattern collection
Forms
Explain input errors and search results without interrupting the task.
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" Filter a small local collection without interrupting typing or treating text as code.
HTML + CSS + JavaScript
Core pattern
Try the example setTimeout(filterItems, 250) Break a short brief into three steps without losing earlier answers.
HTML + CSS + JavaScript
Core pattern
Try the example <fieldset><legend>1. The project</legend> Reveal a fixed dummy password while preserving its text selection.
HTML + CSS + JavaScript
Core pattern
Try the example input.type = show ? "text" : "password" Keep collection, item, and finish choices consistent as their parents change.
HTML + CSS + JavaScript
Core pattern
Try the example select.replaceChildren() Give a short working note room to grow without letting it fill the page.
HTML + CSS + JavaScript
Core pattern
Try the example textarea.style.height = "auto" Represent none, some, or all editable items with one master checkbox.
HTML + CSS + JavaScript
Core pattern
Try the example master.indeterminate = checked > 0 && checked < total Keep a typed quantity, step buttons, and a sample total in agreement.
HTML + CSS + JavaScript
Core pattern
Try the example <input type="number" min="1" max="12" step="1"> Native radio star rating
FormsUse familiar stars while keeping native radio behavior and one selected value.
HTML + CSS + JavaScript
Core pattern
Try the example <input type="radio" name="rating" value="3"> Core pattern
Try the example URL.createObjectURL(file) Keep a short draft locally only after the reader chooses to save.
HTML + CSS + JavaScript
Core pattern
Try the example localStorage.setItem(key, JSON.stringify(draft)) A complete example, every time.
Each snippet is a self-contained HTML document with its CSS and any JavaScript included. The live preview uses the exact source shown below it. Copy or download the file, open it in a browser, and edit it in your own project. Original example code includes an MIT license notice.
These are starting points with documented behavior and limits. Test your customized version with your own content and supported browsers. The embedded previews are isolated; clipboard access and saved preferences can be restricted there.