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

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-left-margin 8px 21px 8px 3px

Margin of the item-left in a radio

$radio-ios-item-right-margin $item-ios-padding-media-top 11px $item-ios-padding-media-bottom ($item-ios-padding-left / 2)

Margin of the item-right 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-left-margin 11px 36px 10px 4px

Margin of the item-left in a radio

$radio-md-item-right-margin $item-md-padding-media-top 10px $item-md-padding-media-bottom 0

Margin of the item-right 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-left-margin 9px 20px 9px 4px

Margin of the item-left in a radio

$radio-wp-item-right-margin 11px 10px 10px 0

Margin of the item-right in a radio

Related

Radio Component Docs, RadioButton API Docs

API

Native

General