Size Picker with Fit Note
A product page size picker, S to XXL. A marker slides along the fit scale under the chips to the chosen size, and the chest measurement line swaps in with a short rise for each pick.
Also known as: size picker radio buttons, s m l xl radio buttons, clothing size selector css, size selector with fit.
HTML
<div class="rad-size-fit-picker" role="radiogroup" aria-label="Size">
<div class="rad-size-fit-picker-head" aria-hidden="true"><span>Size</span><span class="rad-size-fit-picker-guide">Fits true to size</span></div>
<div class="rad-size-fit-picker-chips">
<label><input type="radio" name="rad-size-fit-picker" value="s"><span>S</span></label>
<label><input type="radio" name="rad-size-fit-picker" value="m" checked><span>M</span></label>
<label><input type="radio" name="rad-size-fit-picker" value="l"><span>L</span></label>
<label><input type="radio" name="rad-size-fit-picker" value="xl" aria-label="XL, 2 left"><span>XL</span><i class="rad-size-fit-picker-low" aria-hidden="true"></i></label>
<label><input type="radio" name="rad-size-fit-picker" value="xxl"><span>XXL</span></label>
</div>
<div class="rad-size-fit-picker-scale" aria-hidden="true"><span class="rad-size-fit-picker-marker"></span></div>
<div class="rad-size-fit-picker-notes" aria-hidden="true">
<span class="rad-size-fit-picker-note">Chest 36 to 38 in</span>
<span class="rad-size-fit-picker-note">Chest 39 to 41 in, our most picked</span>
<span class="rad-size-fit-picker-note">Chest 42 to 44 in</span>
<span class="rad-size-fit-picker-note">Chest 45 to 47 in, only 2 left</span>
<span class="rad-size-fit-picker-note">Chest 48 to 50 in</span>
</div>
</div>CSS
.rad-size-fit-picker {
--c: var(--rad-color, #3b82f6);
font-size: var(--rad-size, 18px);
--i: 1;
--w: 2.7em;
--gap: 0.4em;
display: grid;
gap: 0.5em;
font-family: system-ui, sans-serif;
line-height: 1.2;
}
.rad-size-fit-picker:has(label:nth-child(1) :checked) { --i: 0; }
.rad-size-fit-picker:has(label:nth-child(2) :checked) { --i: 1; }
.rad-size-fit-picker:has(label:nth-child(3) :checked) { --i: 2; }
.rad-size-fit-picker:has(label:nth-child(4) :checked) { --i: 3; }
.rad-size-fit-picker:has(label:nth-child(5) :checked) { --i: 4; }
.rad-size-fit-picker-head {
display: flex;
justify-content: space-between;
font-size: 0.8em;
font-weight: 650;
}
.rad-size-fit-picker-guide {
font-weight: 500;
color: color-mix(in srgb, currentColor 50%, transparent);
}
.rad-size-fit-picker-chips {
display: flex;
gap: var(--gap);
}
.rad-size-fit-picker label {
position: relative;
cursor: pointer;
}
.rad-size-fit-picker input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.rad-size-fit-picker label span {
display: grid;
place-items: center;
box-sizing: border-box;
border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
border-radius: 0.55em;
width: calc(var(--w) / 0.85);
height: calc(2.3em / 0.85);
font-size: 0.85em;
font-weight: 650;
color: color-mix(in srgb, currentColor 70%, transparent);
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.25s ease, box-shadow 0.3s ease, transform 0.15s ease;
}
.rad-size-fit-picker label:hover span {
border-color: color-mix(in srgb, currentColor 40%, transparent);
color: currentColor;
}
.rad-size-fit-picker input:checked + span {
border-color: var(--c);
background: color-mix(in srgb, var(--c) 10%, transparent);
color: var(--c);
box-shadow: inset 0 0 0 1px var(--c);
}
.rad-size-fit-picker label:active span {
transform: scale(0.94);
}
.rad-size-fit-picker input:focus-visible + span {
outline: 0.12em solid var(--c);
outline-offset: 0.18em;
}
.rad-size-fit-picker-low {
position: absolute;
top: 0.3em;
right: 0.3em;
width: 0.32em;
height: 0.32em;
border-radius: 50%;
background: #f59e0b;
pointer-events: none;
}
.rad-size-fit-picker-scale {
position: relative;
height: 0.22em;
margin: 0.15em 0;
border-radius: 99em;
background: linear-gradient(90deg, color-mix(in srgb, currentColor 10%, transparent), color-mix(in srgb, currentColor 22%, transparent));
}
.rad-size-fit-picker-marker {
position: absolute;
top: 50%;
left: 0;
width: var(--w);
height: 0.5em;
border-radius: 99em;
background: var(--c);
box-shadow: 0 0.15em 0.4em -0.1em var(--c);
transform: translate(calc(var(--i) * (var(--w) + var(--gap))), -50%) scaleX(0.4);
transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.rad-size-fit-picker-notes {
display: grid;
font-size: 0.78em;
color: color-mix(in srgb, currentColor 60%, transparent);
}
.rad-size-fit-picker-note {
grid-area: 1 / 1;
opacity: 0;
transform: translateY(0.5em);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.rad-size-fit-picker:has(label:nth-child(1) :checked) .rad-size-fit-picker-note:nth-child(1),
.rad-size-fit-picker:has(label:nth-child(2) :checked) .rad-size-fit-picker-note:nth-child(2),
.rad-size-fit-picker:has(label:nth-child(3) :checked) .rad-size-fit-picker-note:nth-child(3),
.rad-size-fit-picker:has(label:nth-child(4) :checked) .rad-size-fit-picker-note:nth-child(4),
.rad-size-fit-picker:has(label:nth-child(5) :checked) .rad-size-fit-picker-note:nth-child(5) {
opacity: 1;
transform: none;
transition: opacity 0.35s ease 0.1s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
@media (prefers-reduced-motion: reduce) {
.rad-size-fit-picker *,
.rad-size-fit-picker *::before,
.rad-size-fit-picker *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.rad-size-fit-picker, .rad-size-fit-picker *, .rad-size-fit-picker::before, .rad-size-fit-picker::after, .rad-size-fit-picker *::before, .rad-size-fit-picker *::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.