ion-radio-group

A radio group is a container for a group of radios. It allows a user to select at most one radio button from a set. Checking one radio button that belongs to a radio group unchecks any previous checked radio button within the same group. For example usage of the radio group, see the radio documentation.

Interfaces

RadioGroupChangeEventDetail

interface RadioGroupChangeEventDetail<T = any> {
  value: T;
}

RadioGroupCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface RadioGroupCustomEvent<T = any> extends CustomEvent {
  detail: RadioGroupChangeEventDetail<T>;
  target: HTMLIonRadioGroupElement;
}

Properties

allowEmptySelection

Description	If true, the radios can be deselected.
Attribute	allow-empty-selection
Type	boolean
Default	false

compareWith

Description	This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-radio-group. When not specified, the default behavior will use strict equality (===) for comparison.
Attribute	compare-with
Type	((currentValue: any, compareValue: any) => boolean) ｜ null ｜ string ｜ undefined
Default	undefined

errorText

Description	The error text to display at the top of the radio group.
Attribute	error-text
Type	string ｜ undefined
Default	undefined

helperText

Description	The helper text to display at the top of the radio group.
Attribute	helper-text
Type	string ｜ undefined
Default	undefined

mode

Description	The mode determines the platform behaviors of the component. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

name

Description	The name of the control, which is submitted with the form data.
Attribute	name
Type	string
Default	this.inputId

theme

Description	The theme determines the visual appearance of the component. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attribute	theme
Type	"ios" ｜ "md" ｜ "ionic"
Default	undefined

value

Description	the value of the radio group.
Attribute	value
Type	any
Default	undefined

Events

Name	Description	Bubbles
ionChange	Emitted when the value has changed. This event will not emit when programmatically setting the value property.	true

Methods

No public methods available for this component.

CSS Shadow Parts

Name	Description
error-text	Supporting text displayed above the radios when the radio group is invalid and touched.
helper-text	Supporting text displayed above the radios when the radio group is valid.
supporting-text	Supporting text displayed above the radios.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

No slots available for this component.