Zum Hauptinhalt springen

Radio

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

Kurzbeschreibung

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

Beispiele

Loading...
<KernInputRadio
    _label="Label"
    _id="inputRadio1"
    _name="inputRadio1"
    _options='[{"label":"Option 1","value":"Option1"},{"label":"Option 2","value":"Option2"}, {"label":"Option 3","value":"Option 3"}]'
></KernInputRadio>

<KernInputRadio
    _label="Label Pflichtfeld"
    _id="inputRadio1"
    _required
    _name="inputRadio1"
    _options='[{"label":"Option 1","value":"Option1"},{"label":"Option 2","value":"Option2"}, {"label":"Option 3","value":"Option 3"}]'
></KernInputRadio>

<KernInputRadio
    _label="Label Disabled"
    _id="inputRadio2"
    _disabled
    _name="inputRadio2"
    _options='[{"label":"Option 1","value":"Option1"},{"label":"Option 2","value":"Option2"}, {"label":"Option 3","value":"Option 3"}]'
></KernInputRadio>

<KernInputRadio
    _label="Label Horizontal"
    _id="inputRadio3"
    _name="inputRadio3"
    _orientation="horizontal"
    _options='[{"label":"Option 1","value":"Option1"},{"label":"Option 2","value":"Option2"}, {"label":"Option 3","value":"Option 3"}]'
></KernInputRadio>

<KernInputRadio
    _label="Label Error"
    _id="inputRadio4"
    _name="inputRadio4"
    _required
    _touched="true"
    _error="Das ist ein Fehler"
    _options='[{"label":"Option 1","value":"Option1"},{"label":"Option 2","value":"Option2"}, {"label":"Option 3","value":"Option 3"}]'
></KernInputRadio>

<KernInputRadio
    _label="Horizontal Error"
    _id="inputRadio5"
    _name="inputRadio5"
    _required
    _touched="true"
    _orientation="horizontal"
    _error="Das ist ein Fehler"
    _options='[{"label":"Option 1","value":"Option1"},{"label":"Option 2","value":"Option2"}, {"label":"Option 3","value":"Option 3"}]'
></KernInputRadio>

<KernInputRadio
    _label="Label"
    _id="inputRadio6"
    _name="inputRadio6"
    _hint="Hinweis Text"
    _options='[{"label":"Option 1","value":"Option1"},{"label":"Option 2","value":"Option2"}, {"label":"Option 3","value":"Option 3"}]'
></KernInputRadio>

<KernInputRadio
    _label="Label Horizontal"
    _id="inputRadio7"
    _name="inputRadio7"
    _hint="Hinweis Text"
    _orientation="horizontal"
    _options='[{"label":"Option 1","value":"Option1"},{"label":"Option 2","value":"Option2"}, {"label":"Option 3","value":"Option 3"}]'
></KernInputRadio>

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.

StateBeschreibung und Verwendung
defaultWenn Nutzende das Element bedienen können, wird die Komponente im Status „default“ angezeigt. Dies ist der Normalzustand in einem Formular.
hoverWird für Eingabeelemente verwendet, wenn der Mauszeiger von Nutzenden über dem Feld schwebt.
focusWenn Nutzende per Mausklick oder mit der Tabulatortaste die Komponente angesteuert haben, wird das Eingabeelement fokussiert, um zu zeigen, dass es zur Eingabe bereit ist.
disabledDer 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.
errorBeim 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 focusIst 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. 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. 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. 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

kern-input-radio

Properties

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyDefiniert, welche Tastenkombination verwendet werden kann, um das interaktive Element des Komponenten auszulösen oder zu fokussieren.string | undefinedundefined
_alert_alertDefiniert, ob die Bildschirmleser die Benachrichtigung vorlesen sollen.boolean | undefinedtrue
_disabled_disabledMacht das Element nicht fokussierbar und ignoriert alle Ereignisse.boolean | undefinedfalse
_error_errorDefiniert den Text der Fehlermeldung.string | undefinedundefined
_hasCounter_has-counterZeigt die Zeichenanzahl an der unteren Grenze der Eingabe an.boolean | undefinedfalse
_hideError_hide-errorVersteckt die Fehlermeldung, lässt sie aber im DOM für das aria-describedby der Eingabe.boolean | undefinedfalse
_hideLabel_hide-labelVersteckt die Beschriftung standardmäßig und zeigt den Beschriftungstext mit einem Tooltip an, wenn das interaktive Element fokussiert ist oder die Maus darüber ist.boolean | undefinedfalse
_hint_hintDefiniert den Hinweistext.string | undefined''
_id_idDefiniert die interne ID des primären Komponentenelements.string | undefinedundefined
_label (required)_labelDefiniert das sichtbare oder semantische Label der Komponente (z.B. aria-label, label, Überschrift, Beschriftung, Zusammenfassung, etc.). Setzen Sie auf false, um den Experten-Slot zu aktivieren.stringundefined
_name_nameDefiniert den technischen Namen eines Eingabefelds.string | undefinedundefined
_on--Gibt die EventCallback-Funktionen für das Input-Event an.InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput | undefinedundefined
_options_optionsOptions the user can choose from.Option<StencilUnknown>[] | string | undefinedundefined
_orientation_orientationDefines whether the orientation of the component is horizontal or vertical."horizontal" | "vertical" | undefined'vertical'
_readOnly_read-onlyMacht das Eingabeelement schreibgeschützt.boolean | undefinedfalse
_required_requiredMacht das Eingabeelement erforderlich.boolean | undefinedfalse
_smartButton_smart-buttonAllows to add a button with an arbitrary action within the element (_hide-label only).string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType | undefined; _ariaControls?: string | undefined; _ariaExpanded?: boolean | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: "button" | "reset" | "submit" | undefined; _variant?: "primary" | "secondary" | "danger" | "tertiary" | "custom" | "normal" | "ghost" | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _name?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _accessKey?: string | undefined; }undefined
_suggestions_suggestionsSuggestions to provide for the input.W3CInputValue[] | string | undefinedundefined
_syncValueBySelector_sync-value-by-selectorSelektor zur Synchronisierung des Wertes mit einem anderen Eingabeelement.string | undefinedundefined
_tabIndex_tab-indexDefiniert, welchen Tab-Index das primäre Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number | undefinedundefined
_tooltipAlign_tooltip-alignDefiniert, wo der Tooltip vorzugsweise angezeigt werden soll: oben, rechts, unten oder links."bottom" | "left" | "right" | "top" | undefined'top'
_touched_touchedZeigt an, ob die Eingabe von einem Benutzer berührt wurde.boolean | undefinedfalse
_value_valueDefines the value of the input.number | string | undefinedundefined