Selected

User has selected the element.

html

<div class="sel-demo" style="--accent:#F5C2E0;">
  <label class="sel-chip"><input class="sel-chip__input" type="radio" name="sel-demo"> Small</label>
  <label class="sel-chip"><input class="sel-chip__input" type="radio" name="sel-demo" checked> Medium</label>
  <label class="sel-chip"><input class="sel-chip__input" type="radio" name="sel-demo"> Large</label>
</div>
<p class="sel-demo__hint">Real radio inputs styled as chips — <code>:checked</code> is the selected look; click any chip to select it.</p>
<style>
.sel-demo { display: flex; gap: 8px; width: 300px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; }
.sel-chip { flex: 1; text-align: center; padding: 10px 6px; border-radius: 8px; border: 1.5px solid #24143025; font-weight: 600; font-size: 13px; cursor: pointer; position: relative; }
.sel-chip__input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sel-chip:has(.sel-chip__input:checked) { border-color: var(--accent); background: var(--accent); }
.sel-demo__hint { width: 300px; box-sizing: border-box; margin: 8px 0 0; font-size: 11px; color: #241430888; }
.sel-demo__hint code { background: #24143012; padding: 1px 5px; border-radius: 4px; }
</style>

tailwind

<div class="flex gap-2 w-[300px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-4 rounded-xl">
  <label class="sel-tw-chip flex-1 text-center px-1.5 py-2.5 rounded-lg border-[1.5px] border-[#24143025] font-semibold text-[13px] cursor-pointer relative has-[:checked]:text-[#241430]" style="--accent:#F5C2E0"><input type="radio" name="sel-tw-demo" class="absolute opacity-0 inset-0 m-0 cursor-pointer"> Small</label>
  <label class="sel-tw-chip flex-1 text-center px-1.5 py-2.5 rounded-lg border-[1.5px] border-[#24143025] font-semibold text-[13px] cursor-pointer relative has-[:checked]:text-[#241430]" style="--accent:#F5C2E0"><input type="radio" name="sel-tw-demo" class="absolute opacity-0 inset-0 m-0 cursor-pointer" checked> Medium</label>
  <label class="sel-tw-chip flex-1 text-center px-1.5 py-2.5 rounded-lg border-[1.5px] border-[#24143025] font-semibold text-[13px] cursor-pointer relative has-[:checked]:text-[#241430]" style="--accent:#F5C2E0"><input type="radio" name="sel-tw-demo" class="absolute opacity-0 inset-0 m-0 cursor-pointer"> Large</label>
</div>
<p class="w-[300px] box-border mt-2 text-[11px] text-[#241430]/55">Real radio inputs styled as chips — <code class="bg-[#24143012] px-1.5 py-0.5 rounded">:checked</code> is the selected look; click any chip to select it.</p>
<style>
.sel-tw-chip:has(:checked) { border-color: var(--accent); background: var(--accent); }
</style>

react

import { useState } from "react";

export function SelectedState({
  item1 = "Small",
  item2 = "Medium",
  item3 = "Large",
  accent = "#F5C2E0",
  force = true,
}) {
  const [selected, setSelected] = useState(force ? 1 : -1);
  const items = [item1, item2, item3];
  return (
    <div>
      <div style={{ display: "flex", gap: 8, width: 300, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12 }}>
        {items.map((item, i) => (
          <label key={item} style={{ flex: 1, textAlign: "center", padding: "10px 6px", borderRadius: 8, border: `1.5px solid ${selected === i ? accent : "#24143025"}`, background: selected === i ? accent : "transparent", fontWeight: 600, fontSize: 13, cursor: "pointer", position: "relative" }}>
            <input type="radio" checked={selected === i} onChange={() => setSelected(i)} style={{ position: "absolute", opacity: 0, inset: 0, margin: 0, cursor: "pointer" }} />
            {item}
          </label>
        ))}
      </div>
      <p style={{ width: 300, margin: "8px 0 0", fontSize: 11, color: "#241430888" }}>Real radio inputs styled as chips — click any chip to select it.</p>
    </div>
  );
}