Zum Hauptinhalt springen

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 _options='[{"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 _ options 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
_options={[
{ label: 'Herr', value: 'Herr' },
{ label: 'Frau', value: 'Frau' },
{ label: 'Firma', value: 'Firma' },
]}
_on={{ onChange: (_event, value) => setValue(value) }}
></kol-input-radio>

Best practices

  • Achten sie darauf id und name korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
  • Es wird immer mindestens ein Wert ausgewählt. Ähnlich dem Verhalten einer Select-Auswahl. ()

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-keyDefines which key combination can be used to trigger or focus the interactive element of the component.string | undefinedundefined
_alert_alertDefines whether the screen-readers should read out the notification.boolean | undefinedtrue
_disabled_disabledMakes the element not focusable and ignore all events.boolean | undefinedfalse
_error_errorDefines the error message text.string | undefinedundefined
_hideError_hide-errorHides the error message but leaves it in the DOM for the input's aria-describedby.boolean | undefinedfalse
_hideLabel_hide-labelHides 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 | undefinedfalse
_hint_hintDefines the hint text.string | undefined''
_id_idDefines the internal ID of the primary component element.string | undefinedundefined
_label (required)_labelDefines 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.stringundefined
_name_nameDefines the technical name of an input field.string | undefinedundefined
_on--Gibt die EventCallback-Funktionen für das Input-Event an.InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus | undefinedundefined
_options_optionsOptions the user can choose from.Option<W3CInputValue>[] | string | undefinedundefined
_orientation_orientationDefines whether the orientation of the component is horizontal or vertical."horizontal" | "vertical" | undefined'vertical'
_required_requiredMakes the input element required.boolean | undefinedfalse
_tabIndex_tab-indexDefines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number | undefinedundefined
_tooltipAlign_tooltip-alignDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top" | undefined'top'
_touched_touchedShows if the input was touched by a user.boolean | undefinedfalse
_value_valueDefines the value of the input.number | string | undefinedundefined

Methods

getValue

getValue() => Promise<W3CInputValue | undefined>

Returns

Type: Promise<W3CInputValue | undefined>

Slots

SlotDescription
Die Legende/Überschrift der Radiobuttons.

Dependencies

Depends on

Graph


Live-Editor

Beispiele