InputRadio

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Choice Group, Radio Buttons, Auswahlgruppe

Beschreibung: Die InputRadio-Komponente besteht aus einer Sammlung von Radio-Elementen und stellt eine Auswahlmöglichkeit zwischen verschiedenen Werten dar. Es kann immer nur ein einzelner Wert zur gleichen Zeit ausgewählt werden.

Beispiel

Darstellung einer einfachen Radio-Auswahlgruppe mit drei Optionen:

<KolInputRadio _label="Anrede" _options={[{"label":"Herr","value":"male"},{"label":"Frau","value":"female"},{"label":"Firma","value":"company"}]} />

Barrierefreiheit

• Gruppierte Radio-Elemente: Die Komponente fasst mehrere Radio-Elemente zu einer Auswahlgruppe zusammen. Es kann immer nur eine Option gleichzeitig ausgewählt sein.
• Label-Pflicht: Jede InputRadio-Komponente muss über das Attribut _label eine Beschriftung erhalten, die den Zweck der Auswahlgruppe klärt.
• Tastatursteuerung: Alle Radio-Elemente sind vollständig über die Tastatur bedienbar. Nach dem Fokussieren der Gruppe kann zwischen den Optionen navigiert werden.
• Fokusmanagement: Die Komponente markiert das aktuell fokussierte Element deutlich und unterstützt eine intuitive Navigation mit Pfeiltasten.
• Hinweistexte: Mit _hint können zusätzliche Informationen bereitgestellt werden, die von Screenreadern vorgelesen werden.
• Fehlermeldungen: Validierungsfehler können über _msg aussagekräftig kommuniziert werden. Mit _hideMsg wird die Fehlermeldung visuell ausgeblendet, bleibt aber im DOM für Screenreader erhalten.

Links und Referenzen

Verwendung

Tastatursteuerung

Taste	Funktion
Tab	Fokussiert die Radio-Auswahlgruppe.
Shift + Tab	Wechselt zum vorherigen interaktiven Element.
Pfeiltasten↑↓	Navigiert zwischen den Radio-Optionen in der Gruppe.
Pfeiltasten←→	Navigiert horizontal zwischen den Radio-Optionen (bei Ausrichtung "horizontal").
Leer / Enter	Selektiert die aktuell fokussierte Radio-Option.

Best Practices / Empfehlungen

• Aussagekräftige Label: Verwenden Sie ein klares, präzises Label für die Auswahlgruppe, das den Zweck deutlich macht (z.B. "Anrede", "Geschlecht").
• Sinnvolle Optionen: Begrenzen Sie die Anzahl der Radio-Optionen auf 3–7 Auswahlmöglichkeiten. Für viele Optionen ist eine besser geeignet.
• Aussagekräftige Option-Labels: Jede Radio-Option sollte ein verständliches Label mit prägnanter Beschriftung haben.
• Standardwert: Wählen Sie einen sinnvollen Standardwert vor, um die Benutzerführung zu unterstützen.
• Orientierung beachten: Nutzen Sie _orientation="vertical" für mehr Optionen und zum einfacheren Scannen der Liste. _orientation="horizontal" sparen Sie Platz bei wenigen Optionen.
• Formular-Integration: Setzen Sie _name korrekt, damit die Daten beim Absenden des Formulars mitgesendet werden.
• Hinweistexte: Geben Sie zusätzliche Erklärungen über _hint an, falls die Optionen nicht selbsterklärend sind.
• Fehlervermeidung: Vermeiden Sie es, Radio-Elemente zu deaktivieren (ohne Begründung) – verwenden Sie stattdessen oder andere Komponenten für dynamische Filterung.

Anwendungsfälle

• Auswahl einer Geschlechtsangabe oder Anrede
• Wahl zwischen Zahlungsmethoden (Kreditkarte, Überweisung, PayPal)
• Auswahl von Lieferoptionen (Express, Standard, Economy)
• Wahl schwerpunktmäßiger Fragen in Umfragen
• Geschäftsmodell-Auswahl bei Registrierung (Privatperson, Unternehmen)
• Prioritätsstufen in Ticketing-Systemen

Konstruktion / Technik

Playground

Testen Sie die verschiedenen Eigenschaften der InputRadio-Komponente:

Options (Label/Value)

Orientation

<KolInputRadio _label="Anrede" _options={[{"label":"Herr","value":"male"},{"label":"Frau","value":"female"},{"label":"Firma","value":"company"}]} />

Funktionalitäten (mit Code)

Basisoptionen und Beschriftung

Die Auswahloptionen werden über _options als Array von Objekten mit label und value definiert:

Options (Label/Value)

<KolInputRadio _label="Geschlecht" _options={[{"label":"Männlich","value":"male"},{"label":"Weiblich","value":"female"},{"label":"Divers","value":"diverse"}]} />

Orientierung

Die Ausrichtung der Radio-Elemente kann horizontal oder vertikal erfolgen:

Orientation

<KolInputRadio _label="Zahlungsmethode" _options={[{"label":"Kreditkarte","value":"card"},{"label":"Überweisung","value":"transfer"},{"label":"PayPal","value":"paypal"}]} _orientation="horizontal" />

Hinweistexte und Formularattribute

Hinweistexte und Validierungsfeedback können über _hint und _msg bereitgestellt werden:

Message

<KolInputRadio _hint="Wählen Sie die gewünschte Versandart aus." _label="Versandart" _options={[{"label":"Express (1–2 Tage)","value":"express"},{"label":"Standard (3–5 Tage)","value":"standard"},{"label":"Economy (5–10 Tage)","value":"economy"}]} />

Events

Zur Behandlung von Events bzw. Callbacks siehe .

Event	Auslöser	Value
focus	Radio-Option wird fokussiert	—
blur	Radio-Option verliert Fokus	—
input	Option wird ausgewählt	value-Attribut der Option
change	Option wird ausgewählt	value-Attribut der Option
click	Option wird angeklickt	—

API

Overview

The InputRadio input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle.

Properties

Property	Attribute	Description	Type	Default
_disabled	_disabled	Makes the element not focusable and ignore all events.	boolean | undefined	false
_hideLabel	_hide-label	Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.	boolean | undefined	false
_hideMsg	_hide-msg	Hides the error message but leaves it in the DOM for the input's aria-describedby.	boolean | undefined	false
_hint	_hint	Defines the hint text.	string | undefined	''
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot.	string	undefined
_msg	_msg	Defines the properties for a message rendered as Alert component.	Omit<AlertProps, "_on" | "_variant" | "_hasCloser" | "_label" | "_level"> & { _description: string; } | string | undefined	undefined
_name	_name	Defines the technical name of an input field.	string | undefined	undefined
_on	--	Gibt die EventCallback-Funktionen für das Input-Event an.	InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown | undefined	undefined
_options	_options	Options the user can choose from.	RadioOption<StencilUnknown>[] | string | undefined	undefined
_orientation	_orientation	Defines whether the orientation of the component is horizontal or vertical.	"horizontal" | "vertical" | undefined	'vertical'
_required	_required	Makes the input element required.	boolean | undefined	false
_tooltipAlign	_tooltip-align	Defines where to show the Tooltip preferably: top, right, bottom or left.	"bottom" | "left" | "right" | "top" | undefined	'top'
_touched	_touched	Shows if the input was touched by a user.	boolean | undefined	false
_value	_value	Defines the value of the element.	boolean | null | number | object | string | undefined	null

Methods

click

click() => Promise<void>

Clicks the primary interactive element inside this component.

Returns

Type: Promise<void>

focus() => Promise<void>

Sets focus on the internal element.

Returns

Type: Promise<void>

getValue() => Promise<StencilUnknown>

Returns the current value.

Returns

Type: Promise<StencilUnknown>

Slots

Slot	Description
	The legend/heading of the radio buttons.

---