Ausführbare HTML-Docs: Radio Button

Q: Wie erstelle ich Radio Buttons in HTML?

Schreib ein pro Option, gib allen denselben name und jeweils einen anderen value und setz jedes in ein : Medium . Der gemeinsame Name macht sie zu einer Gruppe, in der nur einer ausgewählt sein kann.

Q: Warum kann ich mehr als einen Radio Button auswählen?

Die Buttons haben nicht denselben name. Radio Buttons bilden nur über einen identischen name (im selben Formular) eine Gruppe, und pro Gruppe kann nur ein Button ausgewählt sein.

Q: Wie lese ich den Wert des gewählten Radio Buttons in JavaScript aus?

Mit form.elements.size.value, wobei size der Name der Gruppe ist; das gibt den Wert des gewählten Buttons zurück oder einen leeren String, wenn keiner gewählt ist. Ohne Formular: document.querySelector('input[name="size"]:checked')?.value.

Q: Wie lege ich einen Standard-Radio-Button fest?

Füg einem Button der Gruppe checked hinzu: . Haben mehrere es, gewinnt der letzte.

So erstellst du Radio Buttons in HTML

Mit Radio Buttons wählt der Leser genau eine Option aus einer Gruppe. Jede Option ist ein <input type="radio">, und derselbe name macht sie zu einer Gruppe. Wähl eine Größe und drück auf 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>

Das Formular sendet ein Paar, size=m: den name der Gruppe und den value des gewählten Buttons. Die Bestandteile:

Derselbe name an jedem Button der Gruppe. Wählst du einen aus, werden die anderen abgewählt.
Ein anderer value an jedem. Das bekommt der Server. Ein Radio Button ohne value sendet on, was dem Server nichts sagt.
checked an der Standardoption.
Ein <label> um jeden, damit der Text anklickbar ist, und ein <fieldset> mit <legend>, damit Screenreader die Frage („Size“) zusammen mit jeder Option ansagen.

Der name macht die Gruppe

Radio Buttons mit verschiedenen Namen sind getrennte Gruppen, und jede Gruppe hat ihre eigene Auswahl. Dieses Beispiel hat zwei Gruppen und dazu eine kaputte Reihe, in der jeder Radio Button aus Versehen einen eigenen Namen bekommen hat:

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

Klick in der kaputten Gruppe alle drei an: Sie bleiben alle ausgewählt, und keiner lässt sich wieder abschalten, das Schlechteste aus beiden Welten. Radio Buttons gruppieren sich über name innerhalb desselben Formulars, zwei Formulare können also jeweils ihre eigene Gruppe name="size" haben.

Pflichtgruppen und keine Standardauswahl

required an einem beliebigen Radio Button der Gruppe bedeutet, dass einer davon ausgewählt sein muss, bevor das Formular abgesendet wird. Ohne checked muss der Leser aktiv wählen, und das ist richtig, wenn es keinen sinnvollen Standard gibt:

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

Drück ohne Auswahl auf Continue, und der Browser stoppt das Absenden mit einer Meldung. Sobald eine Option gewählt ist, ist die ganze Gruppe gültig. Eine Gruppe ohne Auswahl, die nicht required ist, sendet gar nichts, wie eine nicht angehakte Checkbox.

Ein Klick kann einen Radio Button auswählen, aber nie abwählen. Wenn „keine Antwort“ auch nach einer Auswahl möglich sein muss, füg eine ausdrückliche Option dafür hinzu.

Den gewählten Wert in JavaScript auslesen

form.elements.name gibt die ganze Gruppe zurück, und ihr .value ist der Wert des gewählten Radio Buttons (ein leerer String, wenn keiner gewählt ist). Das Event change feuert an dem Radio Button, der ausgewählt wurde:

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

Der Listener hängt am Formular und fängt so eine Änderung in jedem seiner Felder ab. Außerhalb eines Formulars findest du den gewählten Radio Button mit document.querySelector('input[name="period"]:checked').

Tastaturverhalten

Eine Radio-Gruppe ist ein einziger Halt in der Tab-Reihenfolge. Tab springt in die Gruppe, auf den gewählten Radio Button (oder, wenn keiner gewählt ist, auf den ersten), und die Pfeiltasten bewegen die Auswahl zwischen den Optionen. Ein weiteres Tab verlässt die Gruppe. Das bekommst du bei echten Radio-Inputs mit gemeinsamem name geschenkt, und es ist noch ein Grund, Radio Buttons nicht aus <div>-Elementen nachzubauen.

Radio Buttons stylen

accent-color färbt den nativen Radio Button um. appearance: none lässt dich deinen eigenen Kreis zeichnen. Und weil ein versteckter Radio Button über sein Label trotzdem ausgewählt werden kann, kann eine Gruppe wie eine Reihe von Karten aussehen und dabei das ganze Radio-Verhalten behalten:

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

Der eigene Kreis ist im angehakten Zustand einfach ein dicker Rahmen. Die Karten verstecken das Input mit opacity: 0 statt display: none, es bleibt also fokussierbar, und die Pfeiltasten funktionieren weiter. :has(input:checked) stylt die gewählte Karte. :has() funktioniert in aktuellen Versionen von Chrome, Firefox und Safari.

Radio Button, Checkbox oder Select?

Nimm	Wenn
Radio Buttons	Eine Auswahl aus wenigen Optionen (etwa 2 bis 6), die alle sichtbar sein sollen
Checkboxen	Beliebig viele Auswahlen, auch keine
Ein `<select>`	Eine Auswahl aus einer langen Liste, etwa Länder (siehe HTML Select)

Häufige Fehler

Verschiedene names in einer Gruppe. Jeder Radio Button lässt sich auswählen, und keiner lässt sich wieder abwählen.
Kein value. Der Server bekommt on, egal was gewählt wurde.
Das Input mit display: none verstecken in einem eigenen Design. Es lässt sich dann weder fokussieren noch per Tastatur bedienen.
Kein <fieldset> und keine <legend>. Screenreader sagen „Small, Auswahlschalter“ an, ohne die Frage dazu.
Ein einzelner Radio Button für ein Kästchen „Ich stimme zu“. Er lässt sich nie wieder abwählen; nimm eine Checkbox.
checked an mehreren Radio Buttons einer Gruppe. Am Ende ist nur der letzte ausgewählt.

Häufig gestellte Fragen

Wie erstelle ich Radio Buttons in HTML?

Schreib ein <input type="radio"> pro Option, gib allen denselben name und jeweils einen anderen value und setz jedes in ein <label>: <label><input type="radio" name="size" value="m"> Medium</label>. Der gemeinsame Name macht sie zu einer Gruppe, in der nur einer ausgewählt sein kann.

Warum kann ich mehr als einen Radio Button auswählen?

Die Buttons haben nicht denselben name. Radio Buttons bilden nur über einen identischen name (im selben Formular) eine Gruppe, und pro Gruppe kann nur ein Button ausgewählt sein.

Wie lese ich den Wert des gewählten Radio Buttons in JavaScript aus?

Mit form.elements.size.value, wobei size der Name der Gruppe ist; das gibt den Wert des gewählten Buttons zurück oder einen leeren String, wenn keiner gewählt ist. Ohne Formular: document.querySelector('input[name="size"]:checked')?.value.

Wie lege ich einen Standard-Radio-Button fest?

Füg einem Button der Gruppe checked hinzu: <input type="radio" name="plan" value="free" checked>. Haben mehrere es, gewinnt der letzte.

Kann man einen Radio Button abwählen?

Nicht per Klick; ein Klick wählt nur aus. Biete eine Option „Keine“ an, setz das Formular zurück oder setz in JavaScript button.checked = false. Wenn die Auswahl optional und entfernbar sein soll, passt eine Checkbox oder ein Select vielleicht besser.

Verwandte Konzepte