Coverage Area Selector
Visitors can choose a coverage region to check where delivery or on-site services are available.
Visitors can choose a coverage region to check where delivery or on-site services are available.
Live Demo
Hover over the element or use Tab to focus.
Source Code
Copy the HTML, CSS or JavaScript you need for your project.
<fieldset class="tbx-1065"><legend>Service coverage areas</legend>
<div class="tbx-1065__grid"><label><input type="radio" name="tbx-1065-area" value="north" checked><span>North area<small>Mon · Wed</small></span></label><label><input type="radio" name="tbx-1065-area" value="east"><span>East area<small>Tue · Thu</small></span></label><label><input type="radio" name="tbx-1065-area" value="west"><span>West area<small>Fri</small></span></label><label><input type="radio" name="tbx-1065-area" value="south"><span>South area<small>Sat</small></span></label></div>
<p class="tbx-1065__message">The selected region is highlighted.</p></fieldset>
.tbx-1065{width:min(292px,100%);min-width:0;margin:0;padding:14px;background:#fff;border:1px solid #d8e5e7;border-radius:10px;color:#2a5361;font:11px/1.3 system-ui,sans-serif}.tbx-1065 legend{float:none;padding:0 4px;font-size:12px;font-weight:800}.tbx-1065__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.tbx-1065 label{position:relative;cursor:pointer;min-width:0}.tbx-1065 input{position:absolute;width:1px;height:1px;opacity:0;left:50%;top:50%}.tbx-1065 label span{display:grid;text-align:center;gap:6px;padding:14px 5px;border:1px solid #d7e3e3;background:#f4f8f8;border-radius:7px;transition:transform .23s,border-color .23s,box-shadow .23s,background .23s;font-weight:750}.tbx-1065 label small{color:#7c919b;font-size:9px;font-weight:500}.tbx-1065 label:hover span{transform:translateY(-3px);border-color:#6baba5}.tbx-1065 input:checked+span{border-color:#327f79;background:#e3f1ed;box-shadow:inset 0 0 0 1px #327f79}.tbx-1065 input:focus-visible+span{outline:3px solid #d2a16e;outline-offset:2px}.tbx-1065__message{font-size:9px;color:#8197a0;text-align:center;margin:11px 0 0}
@media(prefers-reduced-motion:reduce){.tbx-1065 label span{transition:none}}
How to Use
Insert the HTML and add the CSS to your stylesheet. Adjust colors and sizes and avoid class conflicts.
Use Case
Useful for local business websites and service pages.
Technical Notes
Keep controls usable on touch devices. Test keyboard focus and reduced-motion preferences.
Mobile: Ensure the interactive content remains accessible without hover on touch devices.
Browser: Uses modern CSS. Check behavior in the browsers you support.
Reduced Motion: Check that prefers-reduced-motion is respected.