ion-radio-group
A radio group is a group of
Usage
<ion-list>
<ion-radio-group>
<ion-list-header>
Auto Manufacturers
</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>
Auto Manufacturers
</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>Auto Manufacturers</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>
);
<template>
<ion-list>
<ion-radio-group>
<ion-list-header>
Auto Manufacturers
</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>
Properties
allowEmptySelection | |
---|---|
Description | If |
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 |
Events
Name | Description |
---|---|
ionChange | Emitted when the value has changed. |