RadioGroup
[radio-group]
[radio-group]A radio group is a group of radio buttons. It allows a user to select at most one radio button from a set. Checking one radio button that belongs to a radio group unchecks any previous checked radio button within the same group.
See the Angular Forms Docs for more information on forms and inputs.
Usage
<ion-list radio-group [(ngModel)]="autoManufacturers">
<ion-list-header>
Auto Manufacturers
</ion-list-header>
<ion-item>
<ion-label>Cord</ion-label>
<ion-radio value="cord"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Duesenberg</ion-label>
<ion-radio value="duesenberg"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Hudson</ion-label>
<ion-radio value="hudson"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Packard</ion-label>
<ion-radio value="packard"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Studebaker</ion-label>
<ion-radio value="studebaker"></ion-radio>
</ion-item>
</ion-list>
Input Properties
| Attr | Type | Details |
|---|---|---|
| disabled | boolean |
If true, the user cannot interact with any of the buttons in the group. |
Output Events
| Attr | Details |
|---|---|
| ionChange | Emitted when the selected button has changed. |
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 |