Square Radio Noir

MODE_01MODE_02

HTML_STRUCTURE

<div class='bh-form-v2-rd-group'><label class='bh-form-v2-rd'><input type='radio' name='n1' checked><span></span>MODE_01</label><label class='bh-form-v2-rd'><input type='radio' name='n1'><span></span>MODE_02</label></div>

CSS_STYLING

.bh-form-v2-rd-group { display: flex; gap: 20px; } .bh-form-v2-rd { color: #fff; font-weight: 900; font-size: 11px; cursor: pointer; display: flex; align-items: center; gap: 8px; } .bh-form-v2-rd input { display: none; } .bh-form-v2-rd span { width: 16px; height: 16px; border: 2px solid #fff; display: block; position: relative; } .bh-form-v2-rd input:checked + span::after { content: ''; width: 8px; height: 8px; background: #fff; position: absolute; top: 2px; left: 2px; }

// DESIGN_NOTES: Komponen ini menggunakan CSS variabel untuk memudahkan kustomisasi warna dan transisi.