Docs HTML exécutables : Bouton radio

Q: Comment faire des boutons radio en HTML ?

Écrivez un par option, donnez-leur à tous le même name et une value différente, et placez chacun dans un : Medium . Le nom partagé en fait un seul groupe où une seule option peut être choisie.

Q: Pourquoi je peux sélectionner plusieurs boutons radio ?

Les boutons ne partagent pas le même name. Les boutons radio ne forment un groupe que par un name identique (dans le même formulaire), et un seul bouton par groupe peut être sélectionné.

Q: Comment récupérer la valeur du bouton radio sélectionné en JavaScript ?

Utilisez form.elements.size.value, où size est le nom du groupe ; cela renvoie la valeur du bouton sélectionné, ou une chaîne vide si aucun ne l'est. Sans formulaire : document.querySelector('input[name="size"]:checked')?.value.

Q: Comment définir un bouton radio par défaut ?

Ajoutez checked à un bouton du groupe : . Si plusieurs l'ont, c'est le dernier qui l'emporte.

Comment faire des boutons radio en HTML

Les boutons radio permettent au lecteur de choisir exactement une option dans un groupe. Chaque option est un <input type="radio">, et c'est leur name commun qui en fait un groupe. Choisissez une taille et appuyez sur 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>

Le formulaire envoie une seule paire, size=m : le name du groupe et la value du bouton sélectionné. Les éléments :

Le même name sur chaque bouton du groupe. En sélectionner un désélectionne les autres.
Une value différente sur chacun. C'est ce que reçoit le serveur. Un radio sans value envoie on, ce qui n'apprend rien au serveur.
checked sur l'option par défaut.
Un <label> autour de chacun, pour que le texte soit cliquable, et un <fieldset> avec <legend> pour que les lecteurs d'écran annoncent la question (« Size ») avec chaque option.

Le name fait le groupe

Des radios avec des noms différents forment des groupes séparés, et chaque groupe a sa propre sélection. Cet exemple a deux groupes, plus un ensemble cassé où chaque radio a reçu par erreur son propre nom :

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

Cliquez sur les trois du groupe cassé : ils restent tous sélectionnés et aucun ne peut plus être désactivé, le pire des deux mondes. Les radios se regroupent par name au sein d'un même formulaire, donc deux formulaires peuvent chacun avoir leur propre groupe name="size".

Groupes obligatoires et absence de choix par défaut

required sur n'importe quel radio du groupe signifie que l'un d'eux doit être sélectionné avant l'envoi du formulaire. Omettre checked oblige le lecteur à choisir activement, ce qui est juste quand il n'y a pas de choix par défaut raisonnable :

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

Appuyez sur Continue sans choisir et le navigateur bloque l'envoi avec un message. Dès qu'une option est choisie, tout le groupe est valide. Un groupe sans sélection qui n'est pas obligatoire n'envoie rien du tout, comme une case à cocher non cochée.

Un clic peut sélectionner un radio mais jamais le désélectionner. Si « pas de réponse » doit rester possible après un choix, ajoutez une option explicite pour cela.

Lire la valeur sélectionnée en JavaScript

form.elements.name renvoie tout le groupe, et son .value est la valeur du radio sélectionné (une chaîne vide s'il n'y en a aucun). L'événement change se déclenche sur le radio qui vient d'être sélectionné :

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

L'écouteur est sur le formulaire, il capte donc un changement dans n'importe lequel de ses champs. Hors d'un formulaire, trouvez le radio sélectionné avec document.querySelector('input[name="period"]:checked').

Comportement au clavier

Un groupe de radios est un seul arrêt dans l'ordre de tabulation. Tab entre dans le groupe en se posant sur le radio sélectionné (ou, s'il n'y en a aucun, sur le premier), et les flèches déplacent la sélection entre les options. Un nouveau Tab quitte le groupe. Ce comportement est offert par de vrais inputs radio qui partagent un name, et c'est une raison de plus de ne pas reconstruire des radios avec des éléments <div>.

Styliser les boutons radio

accent-color recolore le radio natif. appearance: none vous laisse dessiner votre propre cercle. Et comme un radio masqué peut toujours être sélectionné via son label, un groupe peut ressembler à un ensemble de cartes tout en gardant tout le comportement 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>

Le cercle personnalisé n'est qu'une bordure épaisse quand il est coché. Les cartes masquent l'input avec opacity: 0 plutôt qu'avec display: none, pour qu'il reste focalisable et que les flèches marchent toujours, et :has(input:checked) stylise la carte sélectionnée. :has() fonctionne dans les versions actuelles de Chrome, Firefox et Safari.

Radio, case à cocher ou select ?

Utilisez	Quand
Des boutons radio	Un choix parmi quelques options (de 2 à 6 environ) qui doivent toutes être visibles
Des cases à cocher	N'importe quel nombre de choix, y compris aucun
Un `<select>`	Un choix dans une longue liste, comme des pays (voir liste déroulante select)

Erreurs fréquentes

Des name différents dans un même groupe. Chaque radio peut être sélectionné et aucun ne peut être effacé.
Pas de value. Le serveur reçoit on quel que soit le choix.
Masquer l'input avec display: none dans un design personnalisé. Il ne peut plus recevoir le focus ni être utilisé au clavier.
Pas de <fieldset> ni de <legend>. Les lecteurs d'écran annoncent « Small, bouton radio » sans la question qui va avec.
Un seul bouton radio pour une case « J'accepte ». Il ne peut jamais être décoché ; utilisez une case à cocher.
checked sur plusieurs radios d'un groupe. Seul le dernier finit sélectionné.

Questions fréquentes

Comment faire des boutons radio en HTML ?

Écrivez un <input type="radio"> par option, donnez-leur à tous le même name et une value différente, et placez chacun dans un <label> : <label><input type="radio" name="size" value="m"> Medium</label>. Le nom partagé en fait un seul groupe où une seule option peut être choisie.

Pourquoi je peux sélectionner plusieurs boutons radio ?

Les boutons ne partagent pas le même name. Les boutons radio ne forment un groupe que par un name identique (dans le même formulaire), et un seul bouton par groupe peut être sélectionné.

Comment récupérer la valeur du bouton radio sélectionné en JavaScript ?

Utilisez form.elements.size.value, où size est le nom du groupe ; cela renvoie la valeur du bouton sélectionné, ou une chaîne vide si aucun ne l'est. Sans formulaire : document.querySelector('input[name="size"]:checked')?.value.

Comment définir un bouton radio par défaut ?

Ajoutez checked à un bouton du groupe : <input type="radio" name="plan" value="free" checked>. Si plusieurs l'ont, c'est le dernier qui l'emporte.

Peut-on décocher un bouton radio ?

Pas en cliquant dessus ; un clic ne fait que sélectionner. Proposez une option « Aucun », réinitialisez le formulaire, ou définissez button.checked = false en JavaScript. Si le choix doit être facultatif et annulable, une case à cocher ou un select conviendra peut-être mieux.

Concepts liés