Skip to main content

InputRadio

Die Komponente InputRadio besteht aus einer Sammlung von Radio-Elementen und stellt so eine Auswahlmöglichkeit zwischen verschiedenen Werten dar. Es kann immer nur ein einzelner Wert zur gleichen Zeit ausgewählt werden. Ausgewählte Radio-Elemente werden i.d.R. mit einem gefüllten und optisch hervorgehobenen Kreis dargestellt.

Das Input-Radio dient der Abbildung einer Auswahlmöglichkeit bei der mindestens und maximal eine Auswahl getroffen werden kann. Das bedeutet, dass ein Input-Radio nicht einzeln vorkommen kann. Aufgrund dessen haben wir die Komponente als Listen-Komponente umgesetzt.


Konstruktion

Code

<kol-input-radio
_id="anrede"
_name="anrede"
_list='[{"label":"Herr","value":"Herr"},{"label":"Frau","value":"Frau"}, {"label":"Firma","value":"Firma"}]'
></kol-input-radio>

Beispiel

Verwendung

Die einzelnen Radio-Elemente innerhalb der Komponente ** InputRadio** werden über dass Attribut _ list als JSON-Objekt übergeben.

Das JSON-Objekt erwartet je Radio-Element folgende Werte:

label = Beschriftung des Radio-Elements

value = Wert des Radio-Elements

Beispiel für die Erstellung des JSON-Objekts zur Definition der Radio-Elemente:

[ { label: 'Herr', value: 'Herr', }, { label: 'Frau', value: 'Frau', }, { label: 'Firma', value: 'Firma', }, ];

onChange

Dem EventHandler werden zwei Parameter übergeben, das ursprüngliche Event und der Wert des ausgewählten RadioButtons. event.target.value enthält die Nummer der Checkbox mit einem '-' davor.

<kol-input-radio
_id="anrede"
_name="anrede"
_list={[
{ label: 'Herr', value: 'Herr' },
{ label: 'Frau', value: 'Frau' },
{ label: 'Firma', value: 'Firma' },
]}
_on={{ onChange: (_event, value) => setValue(value) }}
></kol-input-radio>

Best practices

Barrierefreiheit

Tastatursteuerung

TasteFunktion
TabFokussiert das erste Radio-Element, aktiviert es aber nicht.
LeerAktiviert das erste Radio-Element, nachdem die RadioGroup über die Tab-Taste angesprungen wurde.
Pfeil-TastenDurchlaufen aller Radio-Elemente und aktiviert das gerade fokussierte Element.

Properties

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyGibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.string | undefinedundefined
_alert_alertGibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.boolean | undefinedtrue
_disabled_disabledSetzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.boolean | undefinedundefined
_error_errorGibt den Text für eine Fehlermeldung an.string | undefinedundefined
_hideLabel_hide-labelVersteckt das sichtbare Label des Elements.boolean | undefinedundefined
_hint_hintGibt den Hinweistext an.string | undefined''
_id_idGibt die technische ID des Eingabefeldes an.string | undefinedundefined
_list (required)_listGibt die Liste der Optionen für das Eingabefeld an.Option<W3CInputValue>[] | stringundefined
_name_nameGibt den technischen Namen des Eingabefeldes an.string | undefinedundefined
_on--Gibt die EventCallback-Funktionen für das Input-Event an.InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus | undefinedundefined
_orientation_orientationGibt die Ausrichtung der LinkList an."horizontal" | "vertical" | undefined'vertical'
_required_requiredMacht das Eingabeelement zu einem Pflichtfeld.boolean | undefinedundefined
_tabIndex_tab-indexGibt an, welchen Tab-Index dieses Input hat.number | undefinedundefined
_touched_touchedGibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.boolean | undefinedfalse
_value_valueGibt den Wert der Radio an. (Known Bug: https://github.com/ionic-team/stencil/issues/3902)number | string | undefinedundefined

Slots

SlotDescription
Die Legende/Überschrift der Radiobuttons.

Dependencies

Used by

Depends on

Graph


Live-Editor

Beispiele