Radio Group

Group of mutually exclusive choices.

html

<fieldset class="rg rg--vertical" style="--accent:#D9C8F0;">
  <legend>Notify me by</legend>
  <label class="rg__opt"><input type="radio" name="notify" checked> <span>Email</span></label>
  <label class="rg__opt"><input type="radio" name="notify"> <span>SMS</span></label>
  <label class="rg__opt"><input type="radio" name="notify"> <span>Phone call</span></label>
</fieldset>
<style>
.rg { border: none; padding: 0; margin: 0; font: 14px system-ui, sans-serif; color: #241430; display: flex; gap: 10px; }
.rg--vertical { flex-direction: column; }
.rg--horizontal { flex-direction: row; gap: 18px; }
.rg legend { font-weight: 500; margin-bottom: 6px; padding: 0; width: 100%; }
.rg__opt { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.rg__opt input { appearance: none; margin: 0; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #24143050; position: relative; flex: none; }
.rg__opt input:checked { border-color: var(--accent); }
.rg__opt input:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.rg__opt input:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); }
.rg__opt input:disabled { opacity: .5; cursor: not-allowed; }
</style>

tailwind

<fieldset class="rg-tw rg-tw--vertical border-0 p-0 m-0 font-sans text-sm text-[#241430] flex gap-2.5" style="--accent:#D9C8F0;">
  <legend class="font-medium mb-1.5 p-0 w-full">Notify me by</legend>
  <label class="inline-flex items-center gap-2 cursor-pointer"><input type="radio" name="notify-tw" class="rg-radio-tw appearance-none m-0 w-[18px] h-[18px] rounded-full border-[1.5px] border-[#24143050] relative flex-none disabled:opacity-50" checked> <span>Email</span></label>
  <label class="inline-flex items-center gap-2 cursor-pointer"><input type="radio" name="notify-tw" class="rg-radio-tw appearance-none m-0 w-[18px] h-[18px] rounded-full border-[1.5px] border-[#24143050] relative flex-none disabled:opacity-50"> <span>SMS</span></label>
  <label class="inline-flex items-center gap-2 cursor-pointer"><input type="radio" name="notify-tw" class="rg-radio-tw appearance-none m-0 w-[18px] h-[18px] rounded-full border-[1.5px] border-[#24143050] relative flex-none disabled:opacity-50"> <span>Phone call</span></label>
</fieldset>
<style>
.rg-tw--vertical { flex-direction: column; }
.rg-tw--horizontal { flex-direction: row; gap: 18px; }
.rg-radio-tw:checked { border-color: #D9C8F0 !important; }
.rg-radio-tw:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #D9C8F0; }
.rg-radio-tw:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, #D9C8F0 40%, transparent); }
</style>

react

export function RadioGroup({
  legend = "Notify me by",
  secondSelected = false,
  orientation = "vertical",
  accent = "#D9C8F0",
  disabled = false,
}) {
  const dot = (checked) => (
    <span style={{
      display: "inline-block", width: 18, height: 18, borderRadius: "50%",
      border: `1.5px solid ${checked ? accent : "#24143050"}`, position: "relative", flex: "none",
    }}>
      {checked && <span style={{ position: "absolute", inset: 3, borderRadius: "50%", background: accent }} />}
    </span>
  );
  const opt = { display: "inline-flex", alignItems: "center", gap: 8, cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.5 : 1 };
  return (
    <fieldset style={{ border: "none", padding: 0, margin: 0, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", display: "flex", flexDirection: orientation === "horizontal" ? "row" : "column", gap: orientation === "horizontal" ? 18 : 10 }}>
      <legend style={{ fontWeight: 500, marginBottom: 6, padding: 0, width: "100%" }}>{legend}</legend>
      <label style={opt}>{dot(!secondSelected)}<span>Email</span></label>
      <label style={opt}>{dot(secondSelected)}<span>SMS</span></label>
      <label style={opt}>{dot(false)}<span>Phone call</span></label>
    </fieldset>
  );
}