Guida HTML interattiva: Radio button

Q: Come si creano i radio button in HTML?

Scrivi un per ogni opzione, dai a tutti lo stesso name e un value diverso, e metti ciascuno in un : Medium . Il nome condiviso li unisce in un gruppo in cui se ne può selezionare solo uno.

Q: Perché posso selezionare più di un radio button?

I pulsanti non hanno lo stesso name. I radio button formano un gruppo solo tramite un name identico (nello stesso modulo), e per ogni gruppo si può selezionare un solo pulsante.

Q: Come leggo il valore del radio button selezionato in JavaScript?

Usa form.elements.size.value, dove size è il nome del gruppo; restituisce il valore del pulsante selezionato, o una stringa vuota se non ce n'è nessuno. Senza un modulo: document.querySelector('input[name="size"]:checked')?.value.

Q: Come imposto un radio button predefinito?

Aggiungi checked a un pulsante del gruppo: . Se ce l'hanno in più, vince l'ultimo.

Come creare radio button in HTML

I radio button permettono al lettore di scegliere esattamente un'opzione da un gruppo. Ogni opzione è un <input type="radio">, ed è dare a tutti lo stesso name che li trasforma in un gruppo. Scegli una taglia e premi 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>

Il modulo invia una sola coppia, size=m: il name del gruppo e il value del pulsante selezionato. I pezzi:

Lo stesso name su ogni pulsante del gruppo. Selezionarne uno deseleziona gli altri.
Un value diverso su ciascuno. È ciò che riceve il server. Un radio senza value invia on, che al server non dice niente.
checked sull'opzione predefinita.
Un <label> attorno a ciascuno, così il testo è cliccabile, e un <fieldset> con <legend> così gli screen reader annunciano la domanda ("Size") insieme a ogni opzione.

Il name crea il gruppo

I radio con nomi diversi sono gruppi separati, e ogni gruppo ha la sua selezione. Questo esempio ha due gruppi, più un insieme rotto in cui ogni radio ha per errore un nome suo:

<!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>

Clicca tutti e tre nel gruppo rotto: restano tutti selezionati e nessuno si può più disattivare, il peggio di entrambi i mondi. I radio si raggruppano per name all'interno dello stesso modulo, quindi due moduli possono avere ciascuno il proprio gruppo name="size".

Gruppi obbligatori e nessun valore predefinito

required su un qualsiasi radio del gruppo significa che uno di essi deve essere selezionato prima che il modulo venga inviato. Lasciare fuori checked obbliga il lettore a scegliere attivamente, cosa giusta quando non c'è un valore predefinito sensato:

<!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>

Premi Continue senza scegliere e il browser blocca l'invio con un messaggio. Appena scegli un'opzione qualsiasi, l'intero gruppo è valido. Un gruppo non selezionato e non obbligatorio non invia proprio niente, come una checkbox non spuntata.

Un clic può selezionare un radio ma mai deselezionarlo. Se dopo una scelta deve essere possibile "nessuna risposta", aggiungi un'opzione esplicita per quello.

Leggere il valore selezionato in JavaScript

form.elements.name restituisce l'intero gruppo, e il suo .value è il valore del radio selezionato (una stringa vuota quando non ce n'è nessuno). L'evento change scatta sul radio appena selezionato:

<!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>

Il listener è sul modulo, quindi intercetta un cambiamento in uno qualsiasi dei suoi campi. Fuori da un modulo, trova il radio selezionato con document.querySelector('input[name="period"]:checked').

Comportamento da tastiera

Un gruppo di radio è una sola tappa nell'ordine del Tab. Tab entra nel gruppo, fermandosi sul radio selezionato (o, se nessuno è selezionato, sul primo), e i tasti freccia spostano la selezione tra le opzioni. Un altro Tab esce dal gruppo. Tutto questo è gratis con veri input radio che condividono un name, ed è un motivo in più per non ricostruire i radio con elementi <div>.

Dare uno stile ai radio button

accent-color cambia il colore del radio nativo. appearance: none ti permette di disegnare il tuo cerchio. E siccome un radio nascosto si può comunque selezionare tramite la sua etichetta, un gruppo può sembrare un insieme di schede mantenendo tutto il comportamento dei 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>

Il cerchio personalizzato è solo un bordo spesso quando è selezionato. Le schede nascondono l'input con opacity: 0 invece di display: none, così resta raggiungibile con il focus e i tasti freccia continuano a funzionare, e :has(input:checked) dà lo stile alla scheda selezionata. :has() funziona nelle versioni attuali di Chrome, Firefox e Safari.

Radio, checkbox o select?

Usa	Quando
Radio button	Una scelta tra poche opzioni (da 2 a 6 circa) che devono essere tutte visibili
Checkbox	Un numero qualsiasi di scelte, anche nessuna
Una `<select>`	Una scelta da una lista lunga, come i paesi (vedi select HTML)

Errori comuni

name diversi in un gruppo. Ogni radio si può selezionare e nessuno si può annullare.
Nessun value. Il server riceve on qualunque sia la scelta.
Nascondere l'input con display: none in un design personalizzato. Non riceve più il focus e non si usa più con la tastiera.
Nessun <fieldset> e <legend>. Gli screen reader annunciano "Small, pulsante di opzione" senza una domanda a cui riferirlo.
Un solo radio button per una casella "Accetto". Non si può mai togliere la spunta; usa una checkbox.
checked su più radio dello stesso gruppo. Alla fine risulta selezionato solo l'ultimo.

Domande frequenti

Come si creano i radio button in HTML?

Scrivi un <input type="radio"> per ogni opzione, dai a tutti lo stesso name e un value diverso, e metti ciascuno in un <label>: <label><input type="radio" name="size" value="m"> Medium</label>. Il nome condiviso li unisce in un gruppo in cui se ne può selezionare solo uno.

Perché posso selezionare più di un radio button?

I pulsanti non hanno lo stesso name. I radio button formano un gruppo solo tramite un name identico (nello stesso modulo), e per ogni gruppo si può selezionare un solo pulsante.

Come leggo il valore del radio button selezionato in JavaScript?

Usa form.elements.size.value, dove size è il nome del gruppo; restituisce il valore del pulsante selezionato, o una stringa vuota se non ce n'è nessuno. Senza un modulo: document.querySelector('input[name="size"]:checked')?.value.

Come imposto un radio button predefinito?

Aggiungi checked a un pulsante del gruppo: <input type="radio" name="plan" value="free" checked>. Se ce l'hanno in più, vince l'ultimo.

Si può deselezionare un radio button?

Non cliccandolo; un clic seleziona e basta. Offri un'opzione "Nessuno", reimposta il modulo o imposta button.checked = false in JavaScript. Se la scelta deve essere facoltativa e annullabile, forse è più adatta una checkbox o una select.

Concetti correlati