ion-radio

Contents

Radios are generally used as a set of related options inside of a group, but they can also be used alone. Pressing on a radio will check it. They can also be checked programmatically by setting the checked property.

An ion-radio-group can be used to group a set of radios. 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

<ion-list>
  <ion-radio-group>
    <ion-list-header>
      <ion-label>Name</ion-label>
    </ion-list-header>

    <ion-item>
      <ion-label>Biff</ion-label>
      <ion-radio slot="start" value="biff" checked></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>
    <ion-list-header>
      <ion-label>Name</ion-label>
    </ion-list-header>

    <ion-item>
      <ion-label>Biff</ion-label>
      <ion-radio slot="start" value="biff" checked></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 from 'react';

import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio } from '@ionic/react';

const Example: React.SFC<{}> = () => (

  <IonList>
    <IonRadioGroup>
      <IonListHeader>
        <IonLabel>Name</IonLabel>
      </IonListHeader>

      <IonItem>
        <IonLabel>Biff</IonLabel>
        <IonRadio slot="start" value="biff" checked></IonRadio>
      </IonItem>

      <IonItem>
        <IonLabel>Griff</IonLabel>
        <IonRadio slot="start" value="griff"></IonRadio>
      </IonItem>

      <IonItem>
        <IonLabel>Buford</IonLabel>
        <IonRadio slot="start" value="buford"></IonRadio>
      </IonItem>
    </IonRadioGroup>
  </IonList>
);

export default Example
<template>
  <ion-list>
    <ion-radio-group>
      <ion-list-header>
        <ion-label>Name</ion-label>
      </ion-list-header>

      <ion-item>
        <ion-label>Biff</ion-label>
        <ion-radio slot="start" value="biff" checked></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>

Properties

checked

Description

If true, the radio is selected.

Attribute checked
Type boolean
Default false

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

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"

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

Events

Name Description
ionBlur Emitted when the radio button loses focus.
ionFocus Emitted when the radio button has focus.
ionSelect Emitted when the radio button is selected.

CSS Custom Properties

Name Description
--color Color of the radio
--color-checked Color of the checked radio