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
checked boolean

If true, the element is selected, and other buttons in the group are unselected.

color string

The color to use from your Sass $colors map. Default options are: "primary", "secondary", "danger", "light", and "dark". For more information, see Theming your App.

disabled boolean

If true, the user cannot interact with this element.

value any

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

Output Events

Attr Details
ionSelect

Emitted when the radio button is 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