GitHub

Components / Form & Input / Radio group

Radio group beta

One choice from a visible set. The dot scales in; nothing else moves.

Preview
Billing cycle 
<fieldset style="border:0;padding:0;margin:0;display:grid;gap:10px">
  <legend style="font-size:12.5px;font-weight:550;margin-bottom:2px">Billing cycle</legend>
  <label class="k-radio"><input type="radio" name="cycle" checked> Monthly</label>
  <label class="k-radio"><input type="radio" name="cycle"> Yearly <span style="color:var(--k-accent-ink);font-size:12px;font-weight:600">−20%</span></label>
  <label class="k-radio"><input type="radio" name="cycle" disabled> Lifetime (sold out)</label>
</fieldset>
/* KATA Radio — native input, styled face. No JS. */
.k-radio{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.k-radio input{appearance:none;-webkit-appearance:none;width:17px;height:17px;margin:0;border:1.5px solid var(--k-border-strong);border-radius:50%;background:var(--k-bg);display:grid;place-content:center;cursor:pointer;transition:border-color .15s;flex:none}
.k-radio input::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--k-core);transform:scale(0);transition:transform .15s cubic-bezier(.3,.7,.3,1)}
.k-radio input:checked{border-color:var(--k-ink)}
.k-radio input:checked::after{transform:scale(1)}
.k-radio input:focus-visible{outline:none;box-shadow:var(--k-ring)}
.k-radio input:disabled{opacity:.5;cursor:not-allowed}
.k-radio:has(input:disabled){color:var(--k-ink-3);cursor:not-allowed}

Usage

Use when all options deserve to be seen (2–5). For longer lists use Select. Group with fieldset/legend.

Accessibility

Native radio inputs share one name, so arrow keys move the choice. The visible circle is styled on the real input.

Previous
Input OTP