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

RadioButton

ion-radio

Improve this doc

A radio button is a button that can be either checked or unchecked. A user can tap the button to check or uncheck it. It can also be checked from the template using the checked property.

Use an element with a radio-group attribute to group a set of radio buttons. When radio buttons are inside a radio group, exactly one radio button in the group can be checked at any time. If a radio button is not placed in a group, they will all have the ability to be checked at the same time.

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

Usage

<ion-list radio-group [(ngModel)]="relationship">
  <ion-item>
    <ion-label>Friends</ion-label>
    <ion-radio value="friends" checked></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Family</ion-label>
    <ion-radio value="family"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Enemies</ion-label>
    <ion-radio value="enemies" [disabled]="isDisabled"></ion-radio>
  </ion-item>
</ion-list>

Input Properties

Attr Type Details
color string

The predefined color to use. For example: "primary", "secondary", "danger".

mode string

The mode to apply to this component. Mode can be ios, wp, or md.

value any

The value of the radio button. Defaults to the generated id.

checked boolean

Whether the radio button should be checked or not. Default false.

disabled boolean

Whether the radio button should be disabled or not. Default false.

Output Events

Attr Details
ionSelect

expression to be evaluated when selected

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, RadioGroup API Docs

API

Native

General