InputRadio

Synonyms: Choice Group, Radio Buttons

The InputRadio component consists of a collection of radio elements and thus represents a choice between different values. Only a single value can be selected at a time. Selected radio elements are usually displayed with a filled and visually highlighted circle.

The input radio is used to display a selection option where at least and a maximum of one selection can be made. This means that an input radio cannot occur individually. Because of this, we implemented the component as a list component.

Construction

Code

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

Example

Usage

The individual radio elements within the InputRadio component are passed as a JSON object via the _options attribute.

The JSON object expects the following values ​​for each radio element:

label = Label of the radio element

value = Value of the radio element

Example of creating the JSON object to define the radio elements:

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

Events

For the handling of events or callbacks, see .

Event	trigger	Value
focus	An option is focused	-
blur	An option loses focus	-
input	Option is selected	value attribute of option
change	Option is selected	value attribute of option

onChange

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

• Make sure to set id and name correctly so that the data is sent when you submit the form.
• At least one value is always selected. Similar to the behavior of a Select selection. ()

Accessibility

Keyboard controls

button	Function
Tab	Focuses on the first radio element, but does not activate it.
Empty	Activates the first radio element after the RadioGroup has been jumped to using the Tab key.
arrow keys	Cycles through all radio elements and activates the currently focused element.

Links and references

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	''
_id	_id	[DEPRECATED] Will be removed in the next major version. 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.	Omit<AlertProps, "_on" | "_hasCloser" | "_label" | "_level" | "_variant"> & { _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

getValue

getValue() => Promise<StencilUnknown>

Returns the current value.

Returns

Type: Promise<StencilUnknown>

kolFocus() => Promise<void>

Sets focus on the internal element.

Returns

Type: Promise<void>

Slots

Slot	Description
	Die Legende/Überschrift der Radiobuttons.

---

Usage _msg

Case	_msg-Value
No message	undefined
Default error message	string
Message	{_type: 'success', _description: 'Success message'}

View example

Live editor

Examples