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

API

Native

General