FigmaOpenCode

Input Radios

Synonyme: Optionsfelder, Auswahlschalter, Radiobuttongruppe, Radiobuttons, Radio Buttons, Radio Group
Ähnliche Komponenten: Checkboxes

Kurzbeschreibung

Radios dienen der Auswahl nur einer Option aus sich gegenseitig ausschließenden Optionen.

Beispiele

Default

Code anzeigen

<fieldset class="kern-fieldset">
<legend class="kern-label">
  Wo sind Sie aktuell gemeldet?
</legend>
<div class="kern-fieldset__body">
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="hamburg" name="meldeadresse" type="radio">
    <label class="kern-label" for="hamburg">in Hamburg</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="ausland" name="meldeadresse" type="radio">
    <label class="kern-label" for="ausland">im Ausland</label>
  </div>
<div>
</fieldset>

Optional

Code anzeigen

<fieldset class="kern-fieldset">
<legend class="kern-label">
  Wo sind Sie aktuell gemeldet?
  <span class="kern-label__optional">- Optional</span>
</legend>
<div class="kern-fieldset__body">
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="hamburg" name="meldeadresse" type="radio">
    <label class="kern-label" for="hamburg">in Hamburg</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="ausland" name="meldeadresse" type="radio">
    <label class="kern-label" for="ausland">im Ausland</label>
  </div>
<div>
</fieldset>

Hinweistext und Fehlermeldung

Code anzeigen

<fieldset class="kern-fieldset kern-fieldset--error" aria-describedby="hint-text">
<legend class="kern-label">
  Wo sind Sie aktuell gemeldet?
</legend>
<div class="kern-hint" id="hint-text">Ein Hinweis gibt Hilfestellung zum Format oder eine Begründung, warum diese Information benötigt wird.</div>
<div class="kern-fieldset__body">
  <div class="kern-form-check">
    <input class="kern-form-check__radio kern-form-check__radio--error" id="hamburg" name="meldeadresse" type="radio">
    <label class="kern-label" for="hamburg">in Hamburg</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__radio kern-form-check__radio--error" id="ausland" name="meldeadresse" type="radio">
    <label class="kern-label" for="ausland">im Ausland</label>
  </div>
<div>
<p class="kern-error" id="kern-input-error" role="alert">
  <span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
  <span class="kern-body">Eine konstruktive Fehlermeldung vermittelt, was Nutzende tun können, um das Problem zu lösen.</span>
</p>
</fieldset>

Horizontale Ausrichtung

Code anzeigen

<fieldset class="kern-fieldset">
<legend class="kern-label">
  Wo sind Sie aktuell gemeldet?
</legend>
<div class="kern-fieldset__body kern-fieldset__body--horizontal">
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="hamburg" name="meldeadresse" type="radio">
    <label class="kern-label" for="hamburg">in Hamburg</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="ausland" name="meldeadresse" type="radio">
    <label class="kern-label" for="ausland">im Ausland</label>
  </div>
<div>
</fieldset>

Beschreibung

infoHinweis

Für Input Radios gelten die allgemein beschriebenen Eigenschaften eines Inputs, wie z. B. Zustände (states) oder Dos and Don’ts.

Mit einer Radio-Gruppe können Nutzende eine Auswahl treffen, welche Option zutreffend ist. Dies kann immer nur eine Option sein, niemals mehrere. Ein Radio erhält immer eine Beschriftung (Label), die die Option möglichst knapp als Aussage beschreibt. Der Indikator – ein Punkt im Kreis – zeigt an, dass die Option ausgewählt ist.
Radio-Gruppen haben immer eine Beschriftung, die klar machen soll, worauf sich die Auswahl bezieht. Bei Bedarf kann die Gruppe mit dem Zusatz „optional“ gekennzeichnet werden. Ein Hint kann mehr Informationen geben. Sollte eine umfangreichere Erklärung nötig sein, kann auch Zugang zur „Hilfe“ angezeigt werden. Die Fehlermeldung wird unterhalb der Gruppe angezeigt, nicht für einzelne Radios.
Input Radio kann alle unter Input beschriebenen Zustände annehmen, mit Ausnahme von „readonly“.

Verwendungsregeln

Radios können zum Beispiel in Formularen verwendet werden, wenn Nutzende eine Option auswählen sollen. Dies könnte zum Beispiel eine Auswahl sein, wie sich Nutzende nachfolgend identifizieren möchten. Gibt es nur zwei Radios, werden diese horizontal angezeigt, bei mehr als zwei Optionen wird die Liste vertikal angeordnet. Ob bereits eine der Optionen von vornherein ausgewählt sein sollte, hängt vom Einsatzzweck ab:

• Handelt es sich um Einstellungen, kann bereits eine Vorauswahl vorhanden sein.
• Wird hingegen durch die Auswahl eine Frage beantwortet, sollte keine der Optionen vorausgewählt sein.

Dos und Don’ts

Es können niemals mehrere Optionen einer Radio-Gruppe ausgewählt werden.

Formuliere die Beschriftung eines Radios wenn möglich als Aussage, nicht als Frage.

Halte die Beschriftung eines Radios möglichst knapp, so dass sie gut erfassbar ist.

Weitere Hinweise

• Formuliere die Beschriftung eines Radios wenn möglichst positiv, also ohne „... nicht ...“ oder „... kein ...“.

Barrierefreiheit

Diese Komponente erfüllt die formalen Eigenschaften (Größe, Kontrastverhältnis) für barrierefreie Dienste. Achte in der angewandten Nutzung darauf, dass Labels auch für Menschen mit kognitiven Beeinträchtigungen verständlich sind.

• Verwende das <legend>-Element, um die Radios zu beschreiben.
• Verwende das aria-describedby-Attribut, um Fehlermeldungen mit den entsprechenden Radios zu verknüpfen.
• Stelle sicher, dass alle Radios innerhalb der Liste über entsprechende Labels verfügen.
• Verwende keine Sonderzeichen als Icons innerhalb von Labels, da diese vom Screenreader als Schrift interpretiert und vorgelesen werden können.
• Falls Sonderzeichen zwingend genutzt werden müssen, sollten diese über ein aria-hidden="true" für den Screenreader versteckt werden.
• Inaktive Radios sollten über ein aria-disabled="true" ausgezeichnet werden und nicht nur mittels disabled. Diese Felder müssen trotz Inaktivität per Tastatur ansteuerbar und für den Screenreader ausgebbar sein.
• Für die Sprachsteuerung muss die sichtbare Beschriftung eines Radios auch mit dem „assistiven“ Namen (z. B. aria-label) übereinstimmen bzw. Inhalt von dessen sein.

Siehe auch: BFIT Handreichungen, w3.org - Grouping Controls, MagentaA11y und w3.org - radio