NG-ZORRORadio
Radio.
When To Use#
- Used to select a single state in multiple options.
- The difference between Select is that Radio is visible to user and can facilitate the comparison of choice. So, when you want to use Radio, option should not be too much.
import { NzRadioModule } from 'ng-zorro-antd/radio';Examples
The simplest use.
Loading...A group of nz-radio components.
Loading...Render radios by configuring options.
Loading...Passing the nzName property to all input[type="radio"] that are in the same RadioGroup. It is usually used to let the browser see your nz-radio-group as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same nz-radio-group.
Loading...Solid radio button style.
Loading...nz-radio unavailable.
Loading...Vertical nz-radio-group, with more radios.
Loading...The combination of radio button style.
Loading...There are three sizes available: large, medium, and small. It can coordinate with input box.
Loading...API#
[nz-radio] | [nz-radio-button]#
| Property | Description | Type | Default |
|---|---|---|---|
[nzAutoFocus] | get focus when component mounted | boolean | false |
[nzDisabled] | Disable radio | boolean | false |
[ngModel] | Specifies whether the radio is selected, double binding | boolean | false |
[nzValue] | use with nz-radio-group | any | - |
(ngModelChange) | The callback function that is triggered when the state changes. | EventEmitter<boolean> | - |
nz-radio-group#
radio group，wrap a group of nz-radio。
| Property | Description | Type | Default |
|---|---|---|---|
[ngModel] | current selected nz-radio value, double binding | any | - |
[nzName] | The name property of all input[type="radio"] children | string | - |
[nzDisabled] | Disable all radio buttons | boolean | false |
[nzSize] | Size, only on radio style | 'large' | 'small' | 'default' | 'default' |
(ngModelChange) | the callback function when current selected nz-radio value change | EventEmitter<string> | - |
[nzButtonStyle] | style type of radio button | 'outline' | 'solid' | 'outline' |
Methods#
[nz-radio]#
you can get NzRadioComponent via ViewChild
| Name | Description |
|---|---|
| blur() | remove focus |
| focus() | get focus |