Radiobuttons

Synonyme: Optionsfelder, Auswahlschalter, Radiobuttongruppe
Ähnliche Komponenten: Checkbox

Kurzbeschreibung

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

Beispiele

EFA Theme
KERN Theme

chevron_right Live Editor

<KernInputRadio
    _label="Anrede"
    _id="anrede1"
    _name="anrede1"
    _options='[{"label":"Herr","value":"Herr"},{"label":"Frau","value":"Frau"}, {"label":"Firma","value":"Firma"}]'
></KernInputRadio>

<KernInputRadio
    _label="Anrede Pflichtfeld"
    _id="anrede1"
    _required
    _name="anrede1"
    _options='[{"label":"Herr","value":"Herr"},{"label":"Frau","value":"Frau"}, {"label":"Firma","value":"Firma"}]'
></KernInputRadio>

<KernInputRadio
    _label="Disabled"
    _id="anrede2"
    _disabled
    _name="anrede2"
    _options='[{"label":"Herr","value":"Herr"},{"label":"Frau","value":"Frau"}, {"label":"Firma","value":"Firma"}]'
></KernInputRadio>

<KernInputRadio
    _label="Horizontal"
    _id="anrede3"
    _name="anrede3"
    _orientation="horizontal"
    _options='[{"label":"Herr","value":"Herr"},{"label":"Frau","value":"Frau"}, {"label":"Firma","value":"Firma"}]'
></KernInputRadio>

<KernInputRadio
    _label="Anrede Error"
    _id="anrede4"
    _name="anrede4"
    _required
    _touched="true"
    _error="Das ist ein Fehler"
    _options='[{"label":"Herr","value":"Herr"},{"label":"Frau","value":"Frau"}, {"label":"Firma","value":"Firma"}]'
></KernInputRadio>

<KernInputRadio
    _label="Horizontal Error"
    _id="anrede5"
    _name="anrede5"
    _required
    _touched="true"
    _orientation="horizontal"
    _error="Das ist ein Fehler"
    _options='[{"label":"Herr","value":"Herr"},{"label":"Frau","value":"Frau"}, {"label":"Firma","value":"Firma"}]'
></KernInputRadio>

<KernInputRadio
    _label="Anrede"
    _id="anrede6"
    _name="anrede6"
    _hint="Hint Text"
    _options='[{"label":"Herr","value":"Herr"},{"label":"Frau","value":"Frau"}, {"label":"Firma","value":"Firma"}]'
></KernInputRadio>

<KernInputRadio
    _label="Anrede Horizontal"
    _id="anrede7"
    _name="anrede7"
    _hint="Hint Text"
    _orientation="horizontal"
    _options='[{"label":"Herr","value":"Herr"},{"label":"Frau","value":"Frau"}, {"label":"Firma","value":"Firma"}]'
></KernInputRadio>

Beschreibung

Mit Radiobuttons können Nutzende eine Auswahl treffen, welche Option zutreffend ist. Dies kann immer nur eine Option sein, niemals mehrere. Ein Radiobutton 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.

Radiobuttongruppen 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 Radiobuttons.

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

Radiobuttons 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 Radiobuttons, 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.

Do & Don’ts

Es können niemals mehrere Optionen einer Radiobuttongruppe ausgewählt werden.

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

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

Vermeide eine Beschriftung lediglich mit „Ja” und „Nein”

Weitere Hinweise

Formuliere die Beschriftung eines Radiobuttons 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.

Siehe auch: BFIT Handreichungen

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?: "custom" \| "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "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`

Radiobuttons

Kurzbeschreibung​

Beispiele​

Beschreibung​

Verwendungsregeln​

Do & Don’ts​

Weitere Hinweise​

Barrierefreiheit​

Properties​

Inhaltsverzeichnis