Checked

Checkbox/radio is selected.

html

<label class="chk-demo" style="--accent:#A8E6C1;">
  <input class="chk-input" type="checkbox" name="chk-demo">
  <span class="chk-demo__label">Email me about updates</span>
</label>
<p class="chk-demo__hint">Click to toggle the real <code>:checked</code> state, or force it with the control above.</p>
<style>
.chk-demo { display: flex; align-items: center; gap: 10px; width: 280px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px 18px; border-radius: 12px; cursor: pointer; }
.chk-input { width: 19px; height: 19px; accent-color: var(--accent); }
.chk-input:checked + .chk-demo__label { font-weight: 700; color: color-mix(in srgb, var(--accent) 70%, #241430); }
.chk-demo__hint { width: 280px; box-sizing: border-box; margin: 8px 0 0; font-size: 11px; color: #241430888; }
.chk-demo__hint code { background: #24143012; padding: 1px 5px; border-radius: 4px; }
</style>

tailwind

<label class="flex items-center gap-2.5 w-[280px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] px-[18px] py-4 rounded-xl cursor-pointer has-[:checked]:font-bold">
  <input type="checkbox" name="chk-tw-demo" class="w-[19px] h-[19px]" style="accent-color:#A8E6C1">
  <span>Email me about updates</span>
</label>
<p class="w-[280px] box-border mt-2 text-[11px] text-[#241430]/55">Click to toggle the real <code class="bg-[#24143012] px-1.5 py-0.5 rounded">:checked</code> state, or force it with the control above.</p>

react

import { useState } from "react";

export function CheckedState({
  label = "Email me about updates",
  kind = "checkbox",
  accent = "#A8E6C1",
  force = false,
}) {
  const [checked, setChecked] = useState(force);
  return (
    <div>
      <label style={{ display: "flex", alignItems: "center", gap: 10, width: 280, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: "16px 18px", borderRadius: 12, cursor: "pointer" }}>
        <input type={kind} checked={checked} onChange={(e) => setChecked(e.target.checked)} style={{ width: 19, height: 19, accentColor: accent }} />
        <span style={{ fontWeight: checked ? 700 : 400 }}>{label}</span>
      </label>
      <p style={{ width: 280, margin: "8px 0 0", fontSize: 11, color: "#241430888" }}>Click to toggle the real <code>:checked</code> state, or force it with the <code>force</code> prop.</p>
    </div>
  );
}