Vertical Stack
Vertical stack with a slim left accent rail that slides between options — perfect for settings panels and form sections.
Vertical Stack the 16th of 18 designs in the 18 CSS Radio Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<fieldset class="crb-stack"> <legend class="crb-sr">Notifications</legend> <input type="radio" name="crb-stack" id="crb-stack-1" checked /> <label for="crb-stack-1"><strong>All</strong><em>Every update</em></label> <input type="radio" name="crb-stack" id="crb-stack-2" /> <label for="crb-stack-2"><strong>Important</strong><em>Critical only</em></label> <input type="radio" name="crb-stack" id="crb-stack-3" /> <label for="crb-stack-3"><strong>Off</strong><em>Silent mode</em></label> <span class="crb-stack-rail"></span> </fieldset>
.crb-stack {
display: flex; flex-direction: column;
position: relative; padding-left: 12px;
border: 0; border-left: 2px solid rgba(255,255,255,0.06);
}
.crb-stack input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-stack label {
display: flex; flex-direction: column; gap: 2px;
padding: 8px 10px; border-radius: 6px;
cursor: pointer; transition: color 0.25s, background 0.25s;
}
.crb-stack label strong {
font: 600 13px/1 system-ui, sans-serif; color: #cbd5e1;
}
.crb-stack label em {
font: 500 11px/1 system-ui, sans-serif; color: #b8b6d4; font-style: normal;
}
.crb-stack input:checked + label strong { color: #fff; }
.crb-stack input:checked + label { background: rgba(124,108,255,0.06); }
.crb-stack-rail {
position: absolute; left: -2px; top: 0;
width: 2px; height: 33.333%;
background: linear-gradient(180deg, #7c6cff, #a78bfa);
border-radius: 2px;
transition: transform 0.4s cubic-bezier(0.65,0,0.35,1);
}
#crb-stack-2:checked ~ .crb-stack-rail { transform: translateY(100%); }
#crb-stack-3:checked ~ .crb-stack-rail { transform: translateY(200%); }
.crb-sr {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}