ion-radio-group
A radio group is a group of radio buttons. 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.
Usage
- Angular
- Javascript
- React
- Stencil
- Vue
<ion-list>
<ion-radio-group>
<ion-list-header>
<ion-label> Auto Manufacturers </ion-label>
</ion-list-header>
<ion-item>
<ion-label>Cord</ion-label>
<ion-radio value="cord"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Duesenberg</ion-label>
<ion-radio value="duesenberg"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Hudson</ion-label>
<ion-radio value="hudson"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Packard</ion-label>
<ion-radio value="packard"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Studebaker</ion-label>
<ion-radio value="studebaker"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<ion-list>
<ion-radio-group>
<ion-list-header>
<ion-label> Auto Manufacturers </ion-label>
</ion-list-header>
<ion-item>
<ion-label>Cord</ion-label>
<ion-radio value="cord"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Duesenberg</ion-label>
<ion-radio value="duesenberg"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Hudson</ion-label>
<ion-radio value="hudson"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Packard</ion-label>
<ion-radio value="packard"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Studebaker</ion-label>
<ion-radio value="studebaker"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
import React from 'react';
import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonRadio, IonItem, IonContent } from '@ionic/react';
export const RadioGroupExample: React.FC = () => (
<IonContent>
<IonList>
<IonRadioGroup>
<IonListHeader>
<IonLabel>Auto Manufacturers</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel>Cord</IonLabel>
<IonRadio value="cord" />
</IonItem>
<IonItem>
<IonLabel>Duesenberg</IonLabel>
<IonRadio value="duesenberg" />
</IonItem>
<IonItem>
<IonLabel>Hudson</IonLabel>
<IonRadio value="hudson" />
</IonItem>
<IonItem>
<IonLabel>Packard</IonLabel>
<IonRadio value="packard" />
</IonItem>
<IonItem>
<IonLabel>Studebaker</IonLabel>
<IonRadio value="studebaker" />
</IonItem>
</IonRadioGroup>
</IonList>
</IonContent>
);
import { Component, h } from '@stencil/core';
@Component({
tag: 'radio-group-example',
styleUrl: 'radio-group-example.css',
})
export class RadioGroupExample {
render() {
return [
<ion-list>
<ion-radio-group>
<ion-list-header>
<ion-label>Auto Manufacturers</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Cord</ion-label>
<ion-radio value="cord"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Duesenberg</ion-label>
<ion-radio value="duesenberg"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Hudson</ion-label>
<ion-radio value="hudson"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Packard</ion-label>
<ion-radio value="packard"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Studebaker</ion-label>
<ion-radio value="studebaker"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>,
];
}
}
<template>
<ion-list>
<ion-radio-group>
<ion-list-header>
<ion-label> Auto Manufacturers </ion-label>
</ion-list-header>
<ion-item>
<ion-label>Cord</ion-label>
<ion-radio value="cord"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Duesenberg</ion-label>
<ion-radio value="duesenberg"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Hudson</ion-label>
<ion-radio value="hudson"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Packard</ion-label>
<ion-radio value="packard"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Studebaker</ion-label>
<ion-radio value="studebaker"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
</template>
<script>
import { IonItem, IonLabel, IonList, IonListHeader, IonRadio, IonRadioGroup } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonItem,
IonLabel,
IonList,
IonListHeader,
IonRadio,
IonRadioGroup,
},
});
</script>
Properties
allowEmptySelection
Description | If true , the radios can be deselected. |
Attribute | allow-empty-selection |
Type | boolean |
Default | false |
name
Description | The name of the control, which is submitted with the form data. |
Attribute | name |
Type | string |
Default | this.inputId |
value
Description | the value of the radio group. |
Attribute | value |
Type | any |
Default | undefined |
Events
Name | Description |
---|---|
ionChange | Emitted when the value has changed. |