Radio Group

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: #050910;
  color: #f2f6ff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.demo {
  width: 100%;
  max-width: 480px;
}
.demo-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.375rem;
}
.demo-sub {
  color: #475569;
  font-size: 0.875rem;
  margin-bottom: 2rem;
}
.section {
  margin-bottom: 2rem;
}
.section-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 0.75rem;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* ── Radio hidden input ── */
.radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* ── Radio dot ── */
.radio-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  transition: border-color 0.15s;
  position: relative;
}
.radio-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38bdf8;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  transform: scale(0.5);
}
.radio-input:checked + .radio-dot {
  border-color: #38bdf8;
}
.radio-input:checked + .radio-dot::after {
  opacity: 1;
  transform: scale(1);
}
.radio-input:focus-visible + .radio-dot {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}
.radio-input:disabled + .radio-dot {
  opacity: 0.35;
}

/* ── Basic list ── */
.radio-list {
  border: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.radio-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: #cbd5e1;
  user-select: none;
}
.radio-item:hover .radio-dot {
  border-color: #38bdf8;
}
.radio-label-text {
}

/* ── Card variant ── */
.radio-cards {
  border: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  cursor: pointer;
  background: #0d1117;
  transition: border-color 0.15s, background 0.15s;
}
.radio-card:hover {
  border-color: rgba(56, 189, 248, 0.3);
}
.radio-card:has(.radio-input:checked) {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.05);
}
.radio-card .radio-dot {
  margin-top: 0.125rem;
}
.radio-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.875rem;
}
.radio-card-content strong {
  color: #f2f6ff;
}
.radio-card-content span {
  color: #64748b;
  font-size: 0.8rem;
}
.save-tag {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border-radius: 999px;
  font-weight: 600;
  margin-left: 0.3rem;
}

/* ── Segmented control ── */
.radio-segment {
  border: none;
  display: inline-flex;
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.625rem;
  padding: 0.25rem;
  gap: 0.25rem;
}
.seg-item {
  position: relative;
  cursor: pointer;
}
.seg-item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.seg-item span {
  display: block;
  padding: 0.375rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
  border-radius: 0.375rem;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.seg-item:hover span {
  color: #94a3b8;
}
.seg-item:has(input:checked) span {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Radio Group</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="demo">
    <h1 class="demo-title">Radio Group</h1>
    <p class="demo-sub">Basic, card, and segmented control variants.</p>

    <section class="section">
      <p class="section-label">Basic</p>
      <fieldset class="radio-list">
        <legend class="sr-only">Notification frequency</legend>
        <label class="radio-item">
          <input type="radio" name="freq" value="realtime" class="radio-input">
          <span class="radio-dot"></span>
          <span class="radio-label-text">Real-time</span>
        </label>
        <label class="radio-item">
          <input type="radio" name="freq" value="daily" class="radio-input" checked>
          <span class="radio-dot"></span>
          <span class="radio-label-text">Daily digest</span>
        </label>
        <label class="radio-item">
          <input type="radio" name="freq" value="weekly" class="radio-input">
          <span class="radio-dot"></span>
          <span class="radio-label-text">Weekly summary</span>
        </label>
        <label class="radio-item">
          <input type="radio" name="freq" value="never" class="radio-input" disabled>
          <span class="radio-dot"></span>
          <span class="radio-label-text">Never (disabled)</span>
        </label>
      </fieldset>
    </section>

    <section class="section">
      <p class="section-label">Card variant</p>
      <fieldset class="radio-cards">
        <legend class="sr-only">Billing cycle</legend>
        <label class="radio-card">
          <input type="radio" name="billing" value="monthly" class="radio-input">
          <span class="radio-dot"></span>
          <span class="radio-card-content">
            <strong>Monthly</strong>
            <span>$12 / month</span>
          </span>
        </label>
        <label class="radio-card">
          <input type="radio" name="billing" value="annual" class="radio-input" checked>
          <span class="radio-dot"></span>
          <span class="radio-card-content">
            <strong>Annual <span class="save-tag">Save 20%</span></strong>
            <span>$9.60 / month</span>
          </span>
        </label>
        <label class="radio-card">
          <input type="radio" name="billing" value="lifetime" class="radio-input">
          <span class="radio-dot"></span>
          <span class="radio-card-content">
            <strong>Lifetime</strong>
            <span>$299 one-time</span>
          </span>
        </label>
      </fieldset>
    </section>

    <section class="section">
      <p class="section-label">Segmented control</p>
      <fieldset class="radio-segment">
        <legend class="sr-only">View mode</legend>
        <label class="seg-item"><input type="radio" name="view" value="grid" class="radio-input"><span>Grid</span></label>
        <label class="seg-item"><input type="radio" name="view" value="list" class="radio-input" checked><span>List</span></label>
        <label class="seg-item"><input type="radio" name="view" value="kanban" class="radio-input"><span>Kanban</span></label>
      </fieldset>
    </section>
  </div>
</body>
</html>

Mutually exclusive selection controls — choose one from a set.

Variants

Basic — classic radio button with label (one column)
Card — full card is clickable; selected card highlights with accent border
Button group — pill-style segmented control (looks like a toggle)

All variants use real <input type="radio"> inputs hidden visually but accessible to screen readers and keyboards.