Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

RadioGroup

[radio-group]

Improve this doc

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.

See the Angular Forms Docs for more information on forms and inputs.

Usage

<ion-list radio-group [(ngModel)]="autoManufacturers">

  <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-list>

Input Properties

Attr Type Details
disabled boolean

If true, the user cannot interact with any of the buttons in the group.

Output Events

Attr Details
ionChange

Emitted when the selected button has changed.

Sass Variables

iOS Material Design Windows Platform
Property Default Description
$radio-ios-color-on color($colors-ios, primary)

Color of the checked radio
$radio-ios-icon-width 16px

Width of the radio icon
$radio-ios-icon-height 21px

Height of the radio icon
$radio-ios-icon-border-width 2px

Border width of the radio icon
$radio-ios-icon-border-style solid

Border style of the radio icon
$radio-ios-disabled-opacity .3

Opacity of the disabled radio
$radio-ios-item-start-margin-top 8px

Margin top of the item-start in a radio
$radio-ios-item-start-margin-end 21px

Margin end of the item-start in a radio
$radio-ios-item-start-margin-bottom 8px

Margin bottom of the item-start in a radio
$radio-ios-item-start-margin-start 3px

Margin start of the item-start in a radio
$radio-ios-item-end-margin-top $item-ios-padding-media-top

Margin top of the item-end in a radio
$radio-ios-item-end-margin-end 11px

Margin end of the item-end in a radio
$radio-ios-item-end-margin-bottom $item-ios-padding-media-bottom

Margin bottom of the item-end in a radio
$radio-ios-item-end-margin-start ($item-ios-padding-start / 2)

Margin start of the item-end in a radio
Property Default Description
$radio-md-color-on color($colors-md, primary)

Color of the checked radio
$radio-md-color-off darken($list-md-border-color, 40%)

Color of the unchecked radio
$radio-md-icon-width 16px

Width of the radio icon
$radio-md-icon-height 16px

Height of the radio icon
$radio-md-icon-border-width 2px

Border width of the radio icon
$radio-md-icon-border-style solid

Border style of the radio icon
$radio-md-icon-border-radius 50%

Border radius of the radio icon
$radio-md-transition-duration 280ms

Transition duration of the radio
$radio-md-transition-easing cubic-bezier(.4, 0, .2, 1)

Transition easing of the radio
$radio-md-disabled-opacity .3

Opacity of the disabled radio
$radio-md-item-start-margin-top 11px

Margin top of the item-start in a radio
$radio-md-item-start-margin-end 36px

Margin end of the item-start in a radio
$radio-md-item-start-margin-bottom 10px

Margin bottom of the item-start in a radio
$radio-md-item-start-margin-start 4px

Margin start of the item-start in a radio
$radio-md-item-end-margin-top $item-md-padding-media-top

Margin top of the item-end in a radio
$radio-md-item-end-margin-end 10px

Margin end of the item-end in a radio
$radio-md-item-end-margin-bottom $item-md-padding-media-bottom

Margin bottom of the item-end in a radio
$radio-md-item-end-margin-start 0

Margin start of the item-end in a radio
Property Default Description
$radio-wp-color-on color($colors-wp, primary)

Color of the checked radio
$radio-wp-color-off #333

Color of the unchecked radio
$radio-wp-order -1

Order of the radio (places to the left of the item)
$radio-wp-icon-width 16px

Width of the radio icon
$radio-wp-icon-height 16px

Height of the radio icon
$radio-wp-icon-border-width 2px

Border width of the radio icon
$radio-wp-icon-border-style solid

Border style of the radio icon
$radio-wp-icon-border-radius 50%

Border radius of the radio icon
$radio-wp-disabled-opacity .3

Opacity of the disabled radio
$radio-wp-item-start-margin-top 9px

Margin top of the item-start in a radio
$radio-wp-item-start-margin-end 20px

Margin end of the item-start in a radio
$radio-wp-item-start-margin-bottom 9px

Margin bottom of the item-start in a radio
$radio-wp-item-start-margin-start 4px

Margin start of the item-start in a radio
$radio-wp-item-end-margin-top 11px

Margin top of the item-end in a radio
$radio-wp-item-end-margin-end 10px

Margin end of the item-end in a radio
$radio-wp-item-end-margin-bottom 10px

Margin bottom of the item-end in a radio
$radio-wp-item-end-margin-start 0

Margin start of the item-end in a radio

Related

Radio Component Docs, RadioButton API Docs

API

Native

General