Checkbox

Independent selection control.

html

<label class="checkbox" for="chk-1">
  <input type="checkbox" id="chk-1" class="checkbox__box checkbox__box--checked" style="--accent:#A8E6C1;--radius:5px;">
  <span class="checkbox__label">Email me about product updates</span>
</label>
<style>
.checkbox { display: inline-flex; align-items: center; gap: 10px; font: 14px system-ui, sans-serif; color: #241430; cursor: pointer; }
.checkbox__box { appearance: none; margin: 0; width: 20px; height: 20px; flex: none; border: 1.5px solid #24143050; border-radius: var(--radius); background: #FAF7F2; position: relative; }
.checkbox__box--checked, .checkbox__box--indeterminate { background: var(--accent); border-color: var(--accent); }
.checkbox__box--checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #241430; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checkbox__box--indeterminate::after { content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 2px; background: #241430; border-radius: 1px; }
.checkbox__box:hover { border-color: var(--accent); }
.checkbox__box:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); }
.checkbox__box:disabled { opacity: .5; cursor: not-allowed; }
.checkbox:has(.checkbox__box:disabled) { cursor: not-allowed; }
</style>

tailwind

<label for="chk-1-tw" class="inline-flex items-center gap-2.5 font-sans text-sm text-[#241430] cursor-pointer">
  <input type="checkbox" id="chk-1-tw" class="chk-tw chk-tw--checked appearance-none m-0 w-5 h-5 flex-none border-[1.5px] border-[#24143050] bg-[#FAF7F2] relative disabled:opacity-50 disabled:cursor-not-allowed" style="border-radius:5px;">
  <span>Email me about product updates</span>
</label>
<style>
.chk-tw--checked, .chk-tw--indeterminate { background: #A8E6C1 !important; border-color: #A8E6C1 !important; }
.chk-tw--checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #241430; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chk-tw--indeterminate::after { content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 2px; background: #241430; border-radius: 1px; }
.chk-tw:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, #A8E6C1 40%, transparent); }
</style>

react

export function Checkbox({
  label = "Email me about product updates",
  state = "checked",
  accent = "#A8E6C1",
  radius = 5,
  disabled = false,
}) {
  const filled = state === "checked" || state === "indeterminate";
  return (
    <label style={{ display: "inline-flex", alignItems: "center", gap: 10, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", cursor: disabled ? "not-allowed" : "pointer" }}>
      <span style={{
        position: "relative", width: 20, height: 20, flex: "none", borderRadius: radius,
        border: `1.5px solid ${filled ? accent : "#24143050"}`, background: filled ? accent : "#FAF7F2",
        opacity: disabled ? 0.5 : 1, display: "inline-block",
      }}>
        {state === "checked" && (
          <svg width="10" height="10" viewBox="0 0 10 10" style={{ position: "absolute", left: 5, top: 4 }}>
            <polyline points="1,5 4,8 9,1" fill="none" stroke="#241430" strokeWidth="2" />
          </svg>
        )}
        {state === "indeterminate" && (
          <span style={{ position: "absolute", left: 4, top: 8, width: 10, height: 2, background: "#241430", borderRadius: 1 }} />
        )}
        <input type="checkbox" disabled={disabled} readOnly checked={state === "checked"} style={{ opacity: 0, position: "absolute", inset: 0, margin: 0 }} />
      </span>
      <span>{label}</span>
    </label>
  );
}