Components / Form & Input / Checkbox / Radio
Checkbox / Radio stable
Native inputs with a restyled face. Keyboard support and form behavior stay intact.
<label class="check"><input type="checkbox" checked>Send estimate</label> <label class="check"><input type="checkbox">Include travel</label> <label class="check"><input type="radio" name="kpay" checked>End of month</label> <label class="check"><input type="radio" name="kpay">End of next month</label>
.check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;font-family:var(--k-font);color:var(--k-ink)}
.check input{appearance:none;width:18px;height:18px;border:1.5px solid var(--k-border-strong);border-radius:5px;background:var(--k-bg);display:grid;place-content:center;cursor:pointer;transition:background .13s,border-color .13s;margin:0;flex:none}
.check input::before{content:"";width:10px;height:10px;transform:scale(0);transition:transform .13s;background:var(--k-bg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}
.check input:checked{background:var(--k-ink);border-color:var(--k-ink)}
.check input:checked::before{transform:scale(1)}
.check input:focus-visible{box-shadow:var(--k-ring);outline:0}
.check input[type="radio"]{border-radius:50%}
.check input[type="radio"]::before{clip-path:none;border-radius:50%;width:8px;height:8px}
.check input[type="radio"]:checked::before{background:var(--k-core)}
Usage
Checkboxes for independent options, radios for exactly one choice in a group.
Accessibility
Native inputs restyled with appearance:none — focus rings, keyboard and form submission keep working.