Skip to content

Radiobutton

Radio Buttons eignen sich, wenn es darum geht, aus einer begrenzten Anzahl von Elementen eine Auswahl zu treffen. Eine Grundregel besagt, dass Radio Buttons idealerweise für bis zu vier Elemente verwendet werden sollten, bei einer größeren Menge bieten sich ein Select als die bessere Option an.

Pflichtfeld

Das <input> Element enthält ein required Attribut.

Titel verpflichtende Radiobuttons

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<p class="infotitle">Titel verpflichtende Radiobuttons</p>
<div class="form-group">
  <div class="form-check">
    <input
      class="form-check-input"
      type="radio"
      name="radiobuttongroup-1"
      id="radiobutton-1"
      required
    />
    <label class="form-check-label" for="radiobutton-1">Auswahl A</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
  <div class="form-check">
    <input
      class="form-check-input"
      type="radio"
      name="radiobuttongroup-1"
      id="radiobutton-2"
      required
    />
    <label class="form-check-label" for="radiobutton-2">Auswahl B</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Optional

Titel Radiobuttons

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<p class="infotitle">Titel Radiobuttons</p>
<div class="form-group">
  <div class="form-check">
    <input
      class="form-check-input"
      type="radio"
      name="radiobuttongroup-2"
      id="radiobutton-3"
    />
    <label class="form-check-label" for="radiobutton-3">Auswahl A</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
  <div class="form-check">
    <input
      class="form-check-input"
      type="radio"
      name="radiobuttongroup-2"
      id="radiobutton-4"
    />
    <label class="form-check-label" for="radiobutton-4">Auswahl B</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Checked

Das <input> Element enthält ein checked Attribut.

Titel vorselektierte Radiobuttons

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<p class="infotitle">Titel vorselektierte Radiobuttons</p>
<div class="form-group">
  <div class="form-check">
    <input
      class="form-check-input"
      type="radio"
      name="radiobuttongroup-3"
      id="radiobutton-5"
      checked
    />
    <label class="form-check-label" for="radiobutton-5">Auswahl A</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
  <div class="form-check">
    <input
      class="form-check-input"
      type="radio"
      name="radiobuttongroup-3"
      id="radiobutton-6"
    />
    <label class="form-check-label" for="radiobutton-6">Auswahl B</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Disabled

Das <input> Element enthält ein disabled Attribut.

Titel deaktivierte Radiobuttons

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<p class="infotitle">Titel deaktivierte Radiobuttons</p>
<div class="form-group">
  <div class="form-check">
    <input
      class="form-check-input"
      type="radio"
      name="radiobuttongroup-4"
      id="radiobutton-7"
      disabled
    />
    <label class="form-check-label" for="radiobutton-7">Auswahl A</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
  <div class="form-check">
    <input
      class="form-check-input"
      type="radio"
      name="radiobuttongroup-4"
      id="radiobutton-8"
      disabled
    />
    <label class="form-check-label" for="radiobutton-8">Auswahl B</label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Validierung

Titel success Radiobuttons

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung

Titel error Radiobuttons

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung
Individuelle Fehlermeldung
Individuelle Erfolgsmeldung