InputRadio

Synonyms: Choice Group, Radio Buttons, Selection Group

Description: The InputRadio component consists of a collection of radio elements and represents a choice between different values. Only a single value can be selected at a time.

Example

Simple radio selection group with three options:

<KolInputRadio _label="Salutation" _options={[ { "label": "Mr.", "value": "male" }, { "label": "Ms.", "value": "female" }, { "label": "Company", "value": "company" } ]} />

Accessibility

• Grouped radio elements: The component groups multiple radio elements into a selection group. Only one option can be selected at a time.
• Label required: Every InputRadio component must have a description via the _label attribute that clarifies the purpose of the selection group.
• Keyboard control: All radio elements are fully operable via keyboard. After focusing the group, navigation between options is possible.
• Focus management: The component clearly marks the currently focused element and supports intuitive navigation with arrow keys.
• Hint texts: Using _hint, additional information can be provided that is read by screen readers.
• Error messages: Validation errors can be communicated meaningfully via _msg. The _hideMsg property hides the error message visually while keeping it in the DOM for screen readers.

Links and References

Usage

Keyboard Controls

Key	Function
Tab	Focuses the radio selection group.
Shift + Tab	Switches to the previous interactive element.
Arrow keys ↑↓	Navigates between radio options in the group.
Arrow keys ←→	Navigates horizontally between radio options (when orientation is "horizontal").
Space / Enter	Selects the currently focused radio option.

Best Practices / Recommendations

• Descriptive labels: Use a clear, concise label for the selection group that clearly indicates its purpose (e.g., "Salutation", "Gender").
• Sensible options: Limit the number of radio options to 3–7 choices. For many options, a is better suited.
• Descriptive option labels: Each radio option should have an understandable label with a concise description.
• Default value: Pre-select a sensible default value to support user guidance.
• Consider orientation: Use _orientation="vertical" for more options and easier list scanning. _orientation="horizontal" saves space for fewer options.
• Form integration: Set _name correctly so form data is sent when the form is submitted.
• Hint texts: Provide additional explanations via _hint when the options are not self-explanatory.
• Avoid disabling: Avoid disabling radio elements without explanation – use or other components for dynamic filtering instead.

Use Cases

• Selecting a salutation or gender
• Choosing between payment methods (credit card, bank transfer, PayPal)
• Selecting shipping options (express, standard, economy)
• Answering single-choice questions in surveys
• Business type selection during registration (private person, company)
• Priority levels in ticketing systems

Playground

Test the various properties of the InputRadio component:

Options (Label/Value)

Orientation

Message

<KolInputRadio _label="Salutation" _options={[ { "label": "Mr.", "value": "male" }, { "label": "Ms.", "value": "female" }, { "label": "Company", "value": "company" } ]} />

Features

Basic Options and Labels

The selection options are defined via _options as an array of objects with label and value:

Options (Label/Value)

<KolInputRadio _label="Gender" _options={[ { "label": "Male", "value": "male" }, { "label": "Female", "value": "female" }, { "label": "Diverse", "value": "diverse" } ]} />

Orientation

The alignment of the radio elements can be horizontal or vertical:

Orientation

<KolInputRadio _label="Payment method" _options={[ { "label": "Credit card", "value": "card" }, { "label": "Bank transfer", "value": "transfer" }, { "label": "PayPal", "value": "paypal" } ]} _orientation="horizontal" />

Hint Texts and Form Attributes

Hint texts and validation feedback can be provided via _hint and _msg:

Message

<KolInputRadio _hint="Select your preferred shipping method." _label="Shipping method" _options={[ { "label": "Express (1–2 days)", "value": "express" }, { "label": "Standard (3–5 days)", "value": "standard" }, { "label": "Economy (5–10 days)", "value": "economy" } ]} />

Events

For handling events or callbacks, see .

Event	Trigger	Value
focus	Radio option is focused	—
blur	Radio option loses focus	—
input	Option is selected	value attribute of option
change	Option is selected	value attribute of option
click	Option is clicked	—

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
_ariaDetails	_aria-details	References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS).	string | undefined	undefined
_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	''
_infoPopover	_info-popover	Defines the informational popover after the label.	any	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" | "_label" | "_level" | "_variant" | "_hasCloser"> & { _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
_variant	_variant	Defines which variant should be used for presentation.	string | string[] | undefined	undefined

Methods

click

click() => Promise<void>

Clicks the primary interactive element inside this component.

Returns

Type: Promise<void>

focus(options?: KolFocusOptions) => Promise<void>

Sets focus on the internal element.

Parameters

Name	Type	Description
options	KolFocusOptions | undefined

Returns

Type: Promise<void>

getValue() => Promise<StencilUnknown>

Returns the current value.

Returns

Type: Promise<StencilUnknown>

Slots

Slot	Description
	The label of the input field.
"expert"	Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot

---