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