Yes No Survey Radio Grid
A short survey: each row is its own yes or no radio group. Answered rows brighten, a segmented bar fills one piece per row, and a CSS counter keeps the answered tally with no script.
Also known as: yes no radio button survey, survey radio buttons css, yes no questionnaire css, radio button matrix.
HTML
<div class="rad-yes-no-survey">
<div class="rad-yes-no-survey-head" aria-hidden="true"><span>Quick check in</span><span>Yes</span><span>No</span></div>
<div class="rad-yes-no-survey-row" role="radiogroup" aria-label="Used it this week">
<span class="rad-yes-no-survey-q" aria-hidden="true">Used it this week</span>
<label><input type="radio" name="rad-yes-no-survey-1" value="yes" aria-label="Yes"></label>
<label><input type="radio" name="rad-yes-no-survey-1" value="no" aria-label="No"></label>
</div>
<div class="rad-yes-no-survey-row" role="radiogroup" aria-label="Would pay for it">
<span class="rad-yes-no-survey-q" aria-hidden="true">Would pay for it</span>
<label><input type="radio" name="rad-yes-no-survey-2" value="yes" aria-label="Yes"></label>
<label><input type="radio" name="rad-yes-no-survey-2" value="no" aria-label="No"></label>
</div>
<div class="rad-yes-no-survey-row" role="radiogroup" aria-label="Shared it with your team">
<span class="rad-yes-no-survey-q" aria-hidden="true">Shared it with your team</span>
<label><input type="radio" name="rad-yes-no-survey-3" value="yes" aria-label="Yes"></label>
<label><input type="radio" name="rad-yes-no-survey-3" value="no" aria-label="No"></label>
</div>
<div class="rad-yes-no-survey-foot" aria-hidden="true">
<span class="rad-yes-no-survey-bar"><span class="rad-yes-no-survey-seg"></span><span class="rad-yes-no-survey-seg"></span><span class="rad-yes-no-survey-seg"></span></span>
<span class="rad-yes-no-survey-count"></span>
</div>
</div>CSS
.rad-yes-no-survey {
--c: var(--rad-color, #3b82f6);
font-size: var(--rad-size, 18px);
counter-reset: rad-yes-no-survey-done;
display: grid;
width: 16em;
font-family: system-ui, sans-serif;
line-height: 1.2;
}
.rad-yes-no-survey-head,
.rad-yes-no-survey-row {
display: grid;
grid-template-columns: 1fr 2.6em 2.6em;
align-items: center;
}
.rad-yes-no-survey-head {
padding: 0 0.2em 0.35em;
font-size: 0.72em;
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
color: color-mix(in srgb, currentColor 50%, transparent);
}
.rad-yes-no-survey-head span + span {
text-align: center;
}
.rad-yes-no-survey-row {
padding: 0.4em 0.2em;
border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
.rad-yes-no-survey-q {
font-size: 0.9em;
color: color-mix(in srgb, currentColor 60%, transparent);
transition: color 0.3s ease;
}
.rad-yes-no-survey-row:has(:checked) .rad-yes-no-survey-q {
color: currentColor;
}
.rad-yes-no-survey label {
display: grid;
place-items: center;
cursor: pointer;
}
.rad-yes-no-survey input {
-webkit-appearance: none;
appearance: none;
display: grid;
place-content: center;
width: 1.15em;
height: 1.15em;
margin: 0;
border: 0.1em solid color-mix(in srgb, currentColor 30%, transparent);
border-radius: 50%;
background: transparent;
color: inherit;
font: inherit;
cursor: pointer;
transition: border-color 0.2s ease, transform 0.15s ease;
}
.rad-yes-no-survey input::before {
content: "";
width: 0.55em;
height: 0.55em;
border-radius: 50%;
background: var(--c);
transform: scale(0);
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rad-yes-no-survey label:hover input:not(:checked) {
border-color: color-mix(in srgb, var(--c) 60%, transparent);
}
.rad-yes-no-survey input:checked {
counter-increment: rad-yes-no-survey-done;
border-color: var(--c);
}
.rad-yes-no-survey input:checked::before {
transform: scale(1);
}
.rad-yes-no-survey input:active {
transform: scale(0.86);
}
.rad-yes-no-survey input:focus-visible {
outline: 0.12em solid var(--c);
outline-offset: 0.18em;
}
.rad-yes-no-survey-foot {
display: flex;
align-items: center;
gap: 0.7em;
padding: 0.55em 0.2em 0;
border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
.rad-yes-no-survey-bar {
display: flex;
flex: 1;
gap: 0.25em;
}
.rad-yes-no-survey-seg {
position: relative;
flex: 1;
height: 0.28em;
overflow: hidden;
border-radius: 99em;
background: color-mix(in srgb, currentColor 12%, transparent);
}
.rad-yes-no-survey-seg::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--c);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.rad-yes-no-survey:has(.rad-yes-no-survey-row:nth-of-type(2) :checked) .rad-yes-no-survey-seg:nth-child(1)::after,
.rad-yes-no-survey:has(.rad-yes-no-survey-row:nth-of-type(3) :checked) .rad-yes-no-survey-seg:nth-child(2)::after,
.rad-yes-no-survey:has(.rad-yes-no-survey-row:nth-of-type(4) :checked) .rad-yes-no-survey-seg:nth-child(3)::after {
transform: scaleX(1);
}
.rad-yes-no-survey-count::after {
content: counter(rad-yes-no-survey-done) " of 3 answered";
font-size: 0.72em;
font-variant-numeric: tabular-nums;
color: color-mix(in srgb, currentColor 55%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.rad-yes-no-survey *,
.rad-yes-no-survey *::before,
.rad-yes-no-survey *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.rad-yes-no-survey, .rad-yes-no-survey *, .rad-yes-no-survey::before, .rad-yes-no-survey::after, .rad-yes-no-survey *::before, .rad-yes-no-survey *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--rad-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--rad-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.