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
- EFA Theme
- KERN Theme
<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.
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
kern-input-radio
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
_accessKey | _access-key | Definiert, welche Tastenkombination verwendet werden kann, um das interaktive Element des Komponenten auszulösen oder zu fokussieren. | string | undefined | undefined |
_alert | _alert | Definiert, ob die Bildschirmleser die Benachrichtigung vorlesen sollen. | boolean | undefined | true |
_disabled | _disabled | Macht das Element nicht fokussierbar und ignoriert alle Ereignisse. | boolean | undefined | false |
_error | _error | Definiert den Text der Fehlermeldung. | string | undefined | undefined |
_hasCounter | _has-counter | Zeigt die Zeichenanzahl an der unteren Grenze der Eingabe an. | boolean | undefined | false |
_hideError | _hide-error | Versteckt die Fehlermeldung, lässt sie aber im DOM für das aria-describedby der Eingabe. | boolean | undefined | false |
_hideLabel | _hide-label | Versteckt 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 | undefined | false |
_hint | _hint | Definiert den Hinweistext. | string | undefined | '' |
_id | _id | Definiert die interne ID des primären Komponentenelements. | string | undefined | undefined |
_label (required) | _label | Definiert 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. | string | undefined |
_name | _name | Definiert den technischen Namen eines Eingabefelds. | string | undefined | undefined |
_on | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput | undefined | undefined |
_options | _options | Options the user can choose from. | Option<StencilUnknown>[] | string | undefined | undefined |
_orientation | _orientation | Defines whether the orientation of the component is horizontal or vertical. | "horizontal" | "vertical" | undefined | 'vertical' |
_readOnly | _read-only | Macht das Eingabeelement schreibgeschützt. | boolean | undefined | false |
_required | _required | Macht das Eingabeelement erforderlich. | boolean | undefined | false |
_smartButton | _smart-button | Allows 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 | _suggestions | Suggestions to provide for the input. | W3CInputValue[] | string | undefined | undefined |
_syncValueBySelector | _sync-value-by-selector | Selektor zur Synchronisierung des Wertes mit einem anderen Eingabeelement. | string | undefined | undefined |
_tabIndex | _tab-index | Definiert, welchen Tab-Index das primäre Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | undefined | undefined |
_tooltipAlign | _tooltip-align | Definiert, wo der Tooltip vorzugsweise angezeigt werden soll: oben, rechts, unten oder links. | "bottom" | "left" | "right" | "top" | undefined | 'top' |
_touched | _touched | Zeigt an, ob die Eingabe von einem Benutzer berührt wurde. | boolean | undefined | false |
_value | _value | Defines the value of the input. | number | string | undefined | undefined |