Skip to main content
Version: v8

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​

DescriptionIf true, the radios can be deselected.
Attributeallow-empty-selection
Typeboolean
Defaultfalse

compareWith​

DescriptionThis 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.
Attributecompare-with
Type((currentValue: any, compareValue: any) => boolean) īŊœ null īŊœ string īŊœ undefined
Defaultundefined

errorText​

DescriptionThe error text to display at the top of the radio group.
Attributeerror-text
Typestring īŊœ undefined
Defaultundefined

helperText​

DescriptionThe helper text to display at the top of the radio group.
Attributehelper-text
Typestring īŊœ undefined
Defaultundefined

name​

DescriptionThe name of the control, which is submitted with the form data.
Attributename
Typestring
Defaultthis.inputId

value​

Descriptionthe value of the radio group.
Attributevalue
Typeany
Defaultundefined

Events​

NameDescriptionBubbles
ionChangeEmitted 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​

No CSS shadow parts available for this component.

CSS Custom Properties​

No CSS custom properties available for this component.

Slots​

No slots available for this component.