Radio button trong HTML: nhóm, mặc định checked và CSS

Cách tạo radio button trong HTML

Radio button cho người dùng chọn đúng một lựa chọn trong một nhóm. Mỗi lựa chọn là một <input type="radio">, và chính việc đặt cùng một name khiến chúng thành một nhóm. Hãy chọn một cỡ và nhấn Order:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Size</legend>
      <label><input type="radio" name="size" value="s"> Small</label>
      <label><input type="radio" name="size" value="m" checked> Medium</label>
      <label><input type="radio" name="size" value="l"> Large</label>
    </fieldset>
    <p><button type="submit">Order</button></p>
  </form>
</body>
</html>

Form gửi đi một cặp, size=m: name của nhóm và value của nút đang được chọn. Các thành phần:

• Cùng một name trên mọi nút của nhóm. Chọn một nút sẽ bỏ chọn các nút còn lại.
• Một value khác nhau trên mỗi nút. Đó là thứ máy chủ nhận được. Radio không có value sẽ gửi on, và máy chủ chẳng biết được gì từ giá trị đó.
• checked trên lựa chọn mặc định.
• Một <label> bọc quanh mỗi nút để chữ cũng bấm được, và một <fieldset> có <legend> để trình đọc màn hình đọc câu hỏi ("Size") cùng với từng lựa chọn.

Thuộc tính name tạo nên nhóm

Các radio có name khác nhau là những nhóm riêng, và mỗi nhóm có lựa chọn riêng. Ví dụ này có hai nhóm, cùng một bộ bị lỗi trong đó mỗi radio vô tình có name riêng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio groups</title>
  <style>
    body { font-family: system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 16px; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    .broken { border-color: #dc2626; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <fieldset>
    <legend>Crust</legend>
    <label><input type="radio" name="crust" value="thin" checked> Thin</label>
    <label><input type="radio" name="crust" value="thick"> Thick</label>
  </fieldset>
  <fieldset>
    <legend>Sauce</legend>
    <label><input type="radio" name="sauce" value="tomato" checked> Tomato</label>
    <label><input type="radio" name="sauce" value="pesto"> Pesto</label>
  </fieldset>
  <fieldset class="broken">
    <legend>Broken: different names</legend>
    <label><input type="radio" name="a" value="1"> One</label>
    <label><input type="radio" name="b" value="2"> Two</label>
    <label><input type="radio" name="c" value="3"> Three</label>
  </fieldset>
</body>
</html>

Hãy click cả ba nút trong nhóm bị lỗi: cả ba đều được chọn và không nút nào tắt đi được nữa, tức là gánh cả nhược điểm của hai loại. Radio được nhóm theo name trong cùng một form, nên hai form có thể mỗi form có một nhóm name="size" riêng.

Nhóm bắt buộc chọn và không có mặc định

required trên bất kỳ radio nào trong nhóm nghĩa là phải chọn một nút trước khi form được gửi. Bỏ checked buộc người dùng tự chọn, điều này hợp lý khi không có lựa chọn mặc định nào thích hợp:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Required radio group</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>How did you hear about us?</legend>
      <label><input type="radio" name="source" value="search" required> Search engine</label>
      <label><input type="radio" name="source" value="friend"> A friend</label>
      <label><input type="radio" name="source" value="video"> A video</label>
      <label><input type="radio" name="source" value="other"> Other</label>
    </fieldset>
    <p><button type="submit">Continue</button></p>
  </form>
</body>
</html>

Nhấn Continue mà chưa chọn, trình duyệt sẽ chặn việc gửi form và hiện thông báo. Khi đã chọn bất kỳ lựa chọn nào, cả nhóm hợp lệ. Một nhóm không bắt buộc mà chưa được chọn sẽ không gửi gì cả, giống như một checkbox chưa được đánh dấu.

Click có thể chọn một radio nhưng không bao giờ bỏ chọn được. Nếu người dùng cần quay lại trạng thái "không trả lời" sau khi đã chọn, hãy thêm một lựa chọn riêng cho trường hợp đó.

Đọc giá trị đã chọn bằng JavaScript

form.elements.name trả về cả nhóm, và .value của nhóm là value của radio đang được chọn (chuỗi rỗng khi chưa có nút nào). Sự kiện change xảy ra trên radio vừa được chọn:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selected value</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { margin-inline-end: 12px; }
    #price { font-size: 1.4em; font-weight: bold; color: #2563eb; }
  </style>
</head>
<body>
  <form id="billing">
    <label><input type="radio" name="period" value="monthly" checked> Monthly</label>
    <label><input type="radio" name="period" value="yearly"> Yearly</label>
  </form>
  <p>Price: <span id="price"></span></p>

  <script>
    const form = document.querySelector('#billing');
    const prices = { monthly: '12 per month', yearly: '96 per year' };
    const show = () => {
      document.querySelector('#price').textContent = prices[form.elements.period.value];
    };
    form.addEventListener('change', show);
    show();
  </script>
</body>
</html>

Trình xử lý sự kiện nằm trên form, nên nó bắt được thay đổi ở bất kỳ trường nào của form. Khi không có form, hãy tìm radio đang được chọn bằng document.querySelector('input[name="period"]:checked').

Dùng bàn phím với radio button

Một nhóm radio chỉ là một điểm dừng khi nhấn Tab. Tab đưa bạn vào nhóm, dừng ở radio đang được chọn (hoặc ở nút đầu tiên khi chưa có nút nào được chọn), và các phím mũi tên chuyển lựa chọn giữa các nút. Nhấn Tab lần nữa để rời nhóm. Bạn có sẵn hành vi này khi dùng input radio thật có chung name, và đó thêm một lý do để không tự dựng lại radio từ các phần tử <div>.

Định dạng radio button

accent-color đổi màu radio gốc của trình duyệt. appearance: none cho phép bạn tự vẽ vòng tròn. Và vì một radio bị ẩn vẫn có thể được chọn qua label của nó, một nhóm có thể trông như một bộ thẻ mà vẫn giữ nguyên mọi hành vi của radio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .accent { accent-color: #16a34a; }

    .dot {
      appearance: none;
      width: 18px;
      height: 18px;
      margin: 0;
      border: 2px solid #6b7280;
      border-radius: 50%;
      vertical-align: middle;
    }
    .dot:checked { border: 6px solid #2563eb; }
    .dot:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

    .cards { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 16px 0 0; }
    .card { display: block; padding: 10px 14px; border: 2px solid #e5e7eb; border-radius: 10px; cursor: pointer; }
    .card input { position: absolute; opacity: 0; }
    .card:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
    .card:has(input:focus-visible) { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="radio" class="accent" name="c1" checked> accent-color</label>
  <label><input type="radio" class="accent" name="c1"> accent-color</label>
  <p>
    <label><input type="radio" class="dot" name="c2" checked> Custom</label>
    <label><input type="radio" class="dot" name="c2"> Custom</label>
  </p>
  <fieldset class="cards">
    <legend>Plan</legend>
    <label class="card"><input type="radio" name="plan" value="free" checked> Free</label>
    <label class="card"><input type="radio" name="plan" value="pro"> Pro</label>
    <label class="card"><input type="radio" name="plan" value="team"> Team</label>
  </fieldset>
</body>
</html>

Vòng tròn tùy chỉnh chỉ là một đường viền dày khi được chọn. Các thẻ ẩn input bằng opacity: 0 thay vì display: none, nên input vẫn nhận focus và phím mũi tên vẫn hoạt động, còn :has(input:checked) định dạng thẻ đang được chọn. :has() chạy được trên các phiên bản Chrome, Firefox và Safari hiện tại.

Radio, checkbox hay select?

Lỗi thường gặp

• Các name khác nhau trong một nhóm. Radio nào cũng chọn được và không nút nào bỏ chọn được.
• Không có value. Máy chủ nhận on dù người dùng chọn gì.
• Ẩn input bằng display: none trong giao diện tùy chỉnh. Input không còn nhận focus hay dùng được bằng bàn phím.
• Không có <fieldset> và <legend>. Trình đọc màn hình đọc "Small, radio button" mà không có câu hỏi đi kèm.
• Chỉ một radio button cho ô "Tôi đồng ý". Nút này không bao giờ bỏ chọn được; hãy dùng checkbox.
• checked trên nhiều radio của một nhóm. Cuối cùng chỉ nút cuối được chọn.