ion-radio
Radios should be used inside of an ion-radio-group
. Pressing on a radio will check it. They can also be checked programmatically by setting the value property of the parent ion-radio-group
to the value of the radio.
When radios are inside of a radio group, only one radio in the group will be checked at any time. Pressing a radio will check it and uncheck the previously selected radio, if there is one. If a radio is not in a group with another radio, then both radios will have the ability to be checked at the same time.
Usage
- Angular
- Javascript
- React
- Stencil
- Vue
<ion-list>
<ion-radio-group value="biff">
<ion-list-header>
<ion-label>Name</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Biff</ion-label>
<ion-radio slot="start" value="biff"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Griff</ion-label>
<ion-radio slot="start" value="griff"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Buford</ion-label>
<ion-radio slot="start" value="buford"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<ion-list>
<ion-radio-group value="biff">
<ion-list-header>
<ion-label>Name</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Biff</ion-label>
<ion-radio slot="start" value="biff"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Griff</ion-label>
<ion-radio slot="start" value="griff"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Buford</ion-label>
<ion-radio slot="start" value="buford"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
import React, { useState } from 'react';
import {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar,
IonList,
IonRadioGroup,
IonListHeader,
IonLabel,
IonItem,
IonRadio,
IonItemDivider,
} from '@ionic/react';
export const RadioExamples: React.FC = () => {
const [selected, setSelected] = useState<string>('biff');
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Radio Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonRadioGroup value={selected} onIonChange={(e) => setSelected(e.detail.value)}>
<IonListHeader>
<IonLabel>Name</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel>Biff</IonLabel>
<IonRadio slot="start" value="biff" />
</IonItem>
<IonItem>
<IonLabel>Griff</IonLabel>
<IonRadio slot="start" value="griff" />
</IonItem>
<IonItem>
<IonLabel>Buford</IonLabel>
<IonRadio slot="start" value="buford" />
</IonItem>
</IonRadioGroup>
<IonItemDivider>Your Selection</IonItemDivider>
<IonItem>{selected ?? '(none selected'}</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
import { Component, h } from '@stencil/core';
@Component({
tag: 'radio-example',
styleUrl: 'radio-example.css',
})
export class RadioExample {
render() {
return [
<ion-list>
<ion-radio-group value="biff">
<ion-list-header>
<ion-label>Name</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Biff</ion-label>
<ion-radio slot="start" value="biff"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Griff</ion-label>
<ion-radio slot="start" value="griff"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Buford</ion-label>
<ion-radio slot="start" value="buford"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>,
];
}
}
<template>
<ion-list>
<ion-radio-group value="biff">
<ion-list-header>
<ion-label>Name</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Biff</ion-label>
<ion-radio slot="start" value="biff"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Griff</ion-label>
<ion-radio slot="start" value="griff"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Buford</ion-label>
<ion-radio slot="start" value="buford"></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
color
Description | 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. |
Attribute | color |
Type | string | undefined |
Default | undefined |
disabled
Description | If true , the user cannot interact with the radio. |
Attribute | disabled |
Type | boolean |
Default | false |
mode
Description | The mode determines which platform styles to use. |
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 |
value
Description | the value of the radio. |
Attribute | value |
Type | any |
Default | undefined |
Events
Name | Description |
---|---|
ionBlur | Emitted when the radio button loses focus. |
ionFocus | Emitted when the radio button has focus. |
Methods
No public methods available for this component.
CSS Shadow Parts
Name | Description |
---|---|
container | The container for the radio mark. |
mark | The checkmark or dot used to indicate the checked state. |
CSS Custom Properties
Name | Description |
---|---|
--border-radius | Border radius of the radio |
--color | Color of the radio |
--color-checked | Color of the checked radio |
--inner-border-radius | Border radius of the inner checked radio |
Slots
No slots available for this component.