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. |
| 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 |