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 Radio

Code anzeigen

<fieldset class="kern-fieldset">
<legend class="kern-fieldset__legend">
  Ansprechpartner
</legend>
<div class="kern-fieldset__content">
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="herr" name="geschlecht" type="radio">
    <label class="kern-form-check__label" for="herr">Herr</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="frau" name="geschlecht" type="radio">
    <label class="kern-form-check__label" for="frau">Frau</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="divers" name="geschlecht" type="radio">
    <label class="kern-form-check__label" for="divers">Divers</label>
  </div>
<div>
</fieldset>

Hint Error Radio

Code anzeigen

<fieldset class="kern-fieldset kern-fieldset--error" aria-describedby="hint-text">
<legend class="kern-fieldset__legend">
  Ansprechpartner
</legend>
<div class="kern-fieldset__hint" id="hint-text">Hint</div>
<div class="kern-fieldset__content">
  <div class="kern-form-check">
    <input class="kern-form-check__radio kern-form-check__radio--error" id="herr" name="geschlecht" type="radio">
    <label class="kern-form-check__label" for="herr">Herr</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__radio kern-form-check__radio--error" id="frau" name="geschlecht" type="radio">
    <label class="kern-form-check__label" for="frau">Frau</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__radio kern-form-check__radio--error" id="divers" name="geschlecht" type="radio">
    <label class="kern-form-check__label" for="divers">Divers</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-text">Eine Auswahl muss getroffen werden</span>
</p>
</fieldset>

Horizontal Radio

Code anzeigen

<fieldset class="kern-fieldset">
<legend class="kern-fieldset__legend">
  Ansprechpartner
</legend>
<div class="kern-fieldset__content kern-fieldset__content--horizontal">
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="herr" name="geschlecht" type="radio">
    <label class="kern-form-check__label" for="herr">Herr</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="frau" name="geschlecht" type="radio">
    <label class="kern-form-check__label" for="frau">Frau</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="divers" name="geschlecht" type="radio">
    <label class="kern-form-check__label" for="divers">Divers</label>
  </div>
<div>
</fieldset>

Beschreibung

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.

State	Beschreibung und Verwendung
default	Wenn Nutzende das Element bedienen können, wird die Komponente im Status „default“ angezeigt. Dies ist der Normalzustand in einem Formular.
hover	Wird für Eingabeelemente verwendet, wenn der Mauszeiger von Nutzenden über dem Feld schwebt.
focus	Wenn Nutzende per Mausklick oder mit der Tabulatortaste die Komponente angesteuert haben, wird das Eingabeelement fokussiert, um zu zeigen, dass es zur Eingabe bereit ist.
disabled	Der Zustand „disabled“ zeigt an, dass Nutzende nicht interagieren können, z.B. bis eine andere Aktion abgeschlossen ist. Blende eine Komponente lieber aus, wenn sie nicht benötigt wird.
error	Beim Status „error“ wird das Eingabelement mit der entsprechenden Funktionsfarbe markiert und mit einer Meldung versehen. Dies passiert, wenn beim Abschicken des Formulars ein Fehler festgestellt wurde, z.B. wenn keine Eingabe erfolgt ist. Die Fehlermeldung sollte knapp und verständlich erklären, was zu tun ist, um den Fehler zu beseitigen. Bei langen Fehlermeldungen, achte darauf, dass die Fehlermeldung das Layout nicht kaputt macht.
error focus	Ist beim Abschicken eines Formulars zuvor ein Fehler aufgetreten, wird dieser am Eingabeelement angezeigt, wie unter „error“ beschrieben. Steuern Nutzende dieses an, um den Fehler zu beheben, bekommt es zusätzlich den Fokus-Zustand (siehe „focus“).

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öglich positiv, also ohne “... nicht ...” oder “... kein ...”

Barrierefreiheit

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße und Kontrastverhältnis – für barrierefreie Dienste.

• Um Screenreader-Nutzer:innen möglichst direkt den gesamten Kontext einer Eingabe im Formular zu liefern, sollte darauf geachtet werden, dass speziell bei kombinierten Eingabefeldern wie beispielsweise Radio-Gruppen nicht nur die Beschriftung mit dem einzelnen „label“-Elementen vorhanden ist, sondern auch eine Verknüpfung zur übergeordneten Beschriftung gepflegt wird. Hierzu bietet es sich an, die Formularelemente mit einem fieldset-Element zu umfassen und die übergeordnete Überschrift als „legend“-Element auszuzeichnen. Durch diese Auszeichnung gibt der Screenreader für die Nutzer:innen die übergeordnete Überschrift, sowie die einzelnen Beschriftungen wieder, wenn die Eingabeelemente den Fokus erhalten.

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