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>

Output Events

Attr Details
ionChange

expression to be evaluated when selection has been 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