A focus ring radio button built with pure HTML and CSS that highlights the selected and focused state using a visible ring effect. It improves accessibility feedback and input state clarity without requiring JavaScript.
Usage
Use this component when interfaces require clear radio selection visibility, such as forms, survey inputs, preference panels, settings screens, or option selectors that benefit from strong focus indicators.
Implementation
The effect is implemented using CSS :checked and :focus visible selectors combined with ring style box shadow or outline techniques, allowing smooth visual emphasis when users interact with the input.
HTML
<label class="radio-ring">
<input type="radio" name="choice">
<span class="radio-ring__dot"></span>
<span class="radio-ring__label">Option</span>
</label>CSS
.radio-ring {
width: max-content;
margin: 0 auto;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 12px;
color: #001BB7;
cursor: pointer;
}
.radio-ring input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.radio-ring__dot {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #9ca3af;
position: relative;
box-sizing: border-box;
flex-shrink: 0;
transition: border-color 140ms ease;
}
.radio-ring input:checked + .radio-ring__dot {
border-color: #2563eb;
}
.radio-ring input:checked + .radio-ring__dot::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid rgba(37, 99, 235, 0.45);
}
.radio-ring input:focus-visible + .radio-ring__dot::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid rgba(37, 99, 235, 0.6);
}
.radio-ring__label {
line-height: 1;
}
@media (prefers-color-scheme: dark) {
.radio-ring {
color: #f4f4f5;
}
.radio-ring__dot {
border-color: #71717a;
}
.radio-ring input:checked + .radio-ring__dot {
border-color: #60a5fa;
}
.radio-ring input:checked + .radio-ring__dot::after,
.radio-ring input:focus-visible + .radio-ring__dot::after {
border-color: rgba(96, 165, 250, 0.5);
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses accessible focus ring styling
- Enhances radio input visibility and clarity
- Fully responsive across breakpoints
- Suitable for forms and settings panels
- Easy to customize ring color and thickness
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.