RadioButton
ion-radio
ion-radioA 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 |
| disabled | boolean |
If true, the user cannot interact with this element. |
| mode | string |
The mode determines which platform styles to use.
Possible values are: |
| 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 |