<!-- Basic --> <!-- Before --> <ion-item> <ion-label>Radio Label</ion-label> <ion-radio></ion-radio> </ion-item> <!-- After --> <ion-item> <ion-radio>Radio Label</ion-radio> </ion-item> <!-- Fixed Labels --> <!-- Before --> <ion-item> <ion-labelposition="fixed">Radio Label</ion-label> <ion-radio></ion-radio> </ion-item> <!-- After --> <ion-item> <ion-radiolabel-placement="fixed">Radio Label</ion-radio> </ion-item> <!-- Radio at the start of line, Label at the end of line --> <!-- Before --> <ion-item> <ion-labelslot="end">Radio Label</ion-label> <ion-radio></ion-radio> </ion-item> <!-- After --> <ion-item> <ion-radiolabel-placement="end">Radio Label</ion-radio> </ion-item>
<!-- Basic --> <!-- Before --> <ion-item> <ion-label>Radio Label</ion-label> <ion-radio></ion-radio> </ion-item> <!-- After --> <ion-item> <ion-radio>Radio Label</ion-radio> </ion-item> <!-- Fixed Labels --> <!-- Before --> <ion-item> <ion-labelposition="fixed">Radio Label</ion-label> <ion-radio></ion-radio> </ion-item> <!-- After --> <ion-item> <ion-radiolabelPlacement="fixed">Radio Label</ion-radio> </ion-item> <!-- Radio at the start of line, Label at the end of line --> <!-- Before --> <ion-item> <ion-labelslot="end">Radio Label</ion-label> <ion-radio></ion-radio> </ion-item> <!-- After --> <ion-item> <ion-radiolabelPlacement="end">Radio Label</ion-radio> </ion-item>
{/* Basic */} {/* Before */} <IonItem> <IonLabel>RadioLabel</IonLabel> <IonRadio></IonRadio> </IonItem> {/* After */} <IonItem> <IonRadio>RadioLabel</IonRadio> </IonItem> {/* Fixed Labels */} {/* Before */} <IonItem> <IonLabelposition="fixed">RadioLabel</IonLabel> <IonRadio></IonRadio> </IonItem> {/* After */} <IonItem> <IonRadiolabelPlacement="fixed">RadioLabel</IonRadio> </IonItem> {/* Radio at the start of line, Label at the end of line */} {/* Before */} <IonItem> <IonLabelslot="end">RadioLabel</IonLabel> <IonRadio></IonRadio> </IonItem> {/* After */} <IonItem> <IonRadiolabelPlacement="end">RadioLabel</IonRadio> </IonItem>
<!-- Basic --> <!-- Before --> <ion-item> <ion-label>Radio Label</ion-label> <ion-radio></ion-radio> </ion-item> <!-- After --> <ion-item> <ion-radio>Radio Label</ion-radio> </ion-item> <!-- Fixed Labels --> <!-- Before --> <ion-item> <ion-labelposition="fixed">Radio Label</ion-label> <ion-radio></ion-radio> </ion-item> <!-- After --> <ion-item> <ion-radiolabel-placement="fixed">Radio Label</ion-radio> </ion-item> <!-- Radio at the start of line, Label at the end of line --> <!-- Before --> <ion-item> <ion-labelslot="end">Radio Label</ion-label> <ion-radio></ion-radio> </ion-item> <!-- After --> <ion-item> <ion-radiolabel-placement="end">Radio Label</ion-radio> </ion-item>
How to control the alignment of the radio and label on the cross axis. "start": The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. "center": The label and control will appear at the center of the cross axis in both LTR and RTL.
The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
How to pack the label and radio within a line. "start": The label and radio will appear on the left in LTR and on the right in RTL. "end": The label and radio will appear on the right in LTR and on the left in RTL. "space-between": The label and radio will appear on opposite ends of the line with space between the two elements.
Where to place the label relative to the radio. "start": The label will appear to the left of the radio in LTR and to the right in RTL. "end": The label will appear to the right of the radio in LTR and to the left in RTL. "fixed": The label has the same behavior as "start" except it also has a fixed width. Long text will be truncated with ellipses ("..."). "stacked": The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the alignment property.
Set the legacy property to true to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the aria-label attribute or the default slot that contains the label text. As a result, the legacy property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.