InputRadio
Synonyme: Choice Group, Radio Buttons
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', }, ];
Events
Events der Komponente können über eine _on-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
kolibriElement._on = {
onFocus: (event) => {
/* Do something on focus */
},
onInput: (event, value) => {
/* Do something with value or event */
},
// ...
};
| Event | Auslöser | Value |
|---|---|---|
| onFocus | Eine Option wird fokussiert | - |
| onInput | Eine Option wird ausgewählt (entspricht nativem input-Event) | value-Attribut der Option |
| onChange | Eine Option wird ausgewählt (entspricht nativem change-Event) | value-Attribut der Option |
| onBlur | Eine Option verliert Fokus | - |
onChange
<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
idundnamekorrekt 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
| Taste | Funktion |
|---|---|
Tab | Fokussiert das erste Radio-Element, aktiviert es aber nicht. |
Leer | Aktiviert das erste Radio-Element, nachdem die RadioGroup über die Tab-Taste angesprungen wurde. |
Pfeil-Tasten | Durchlaufen aller Radio-Elemente und aktiviert das gerade fokussierte Element. |
Links und Referenzen
Synonyme: Choice Group, Radio Buttons
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', }, ];
Events
Events der Komponente können über eine _on-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
kolibriElement._on = {
onFocus: (event) => {
/* Do something on focus */
},
onInput: (event, value) => {
/* Do something with value or event */
},
// ...
};
| Event | Auslöser | Value |
|---|---|---|
| onFocus | Eine Option wird fokussiert | - |
| onInput | Eine Option wird ausgewählt (entspricht nativem input-Event) | value-Attribut der Option |
| onChange | Eine Option wird ausgewählt (entspricht nativem change-Event) | value-Attribut der Option |
| onBlur | Eine Option verliert Fokus | - |
onChange
<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
idundnamekorrekt 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
| Taste | Funktion |
|---|---|
Tab | Fokussiert das erste Radio-Element, aktiviert es aber nicht. |
Leer | Aktiviert das erste Radio-Element, nachdem die RadioGroup über die Tab-Taste angesprungen wurde. |
Pfeil-Tasten | Durchlaufen aller Radio-Elemente und aktiviert das gerade fokussierte Element. |
Links und Referenzen
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_accessKey | _access-key | Defines which key combination can be used to trigger or focus the interactive element of the component. | string | undefined | undefined |
_alert | _alert | [DEPRECATED] Will be removed in v3. Use automatic behaviour instead. Defines whether the screen-readers should read out the notification. | boolean | undefined | undefined |
_disabled | _disabled | Makes the element not focusable and ignore all events. | boolean | undefined | false |
_error | _error | [DEPRECATED] Will be removed in v3. Use msg instead.Defines the error message text. | string | undefined | undefined |
_hideError | _hide-error | Hides the error message but leaves it in the DOM for the input's aria-describedby. | 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 |
_hint | _hint | Defines the hint text. | string | undefined | '' |
_id | _id | Defines the internal ID of the primary component element. | string | undefined | 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. | string | undefined | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6 | undefined; _on?: KoliBriAlertEventCallbacks | undefined; _type?: "default" | "info" | "success" | "warning" | "error" | undefined; _variant?: "card" | "msg" | undefined; _label?: string | undefined; _alert?: boolean | undefined; _hasCloser?: boolean | undefined; } & { _description: string; } | 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 | 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 |
_shortKey | _short-key | Adds a visual short key hint to the component. | string | undefined | undefined |
_tabIndex | _tab-index | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | undefined | undefined |
_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 input. | boolean | null | number | object | string | undefined | undefined |
Methods
focus
focus() => Promise<void>
[DEPRECATED] Use kolFocus instead.
Returns
Type: Promise<void>
getValue() => Promise<StencilUnknown | undefined>
Returns
Type: Promise<StencilUnknown>
kolFocus() => Promise<void>
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| Die Legende/Überschrift der Radiobuttons. |