Radio

Used to select a single state from multiple options.

Import

Source

components/radio

Docs

Edit this page

When To Use#

Used to select a single state in multiple options.
The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them.

Examples#

Radio

Basic

The simplest use.

      Loading...

ABCD

Radio Group

A group of nz-radio components.

      Loading...

ABCD

RadioGroup with name

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

HangzhouShanghaiBeijingChengdu

Solid radio button

Solid radio button style.

      Loading...

Disabled
Disabled

Disabled

nz-radio unavailable.

      Loading...

Option AOption BOption C More...

Vertical RadioGroup

Vertical nz-radio-group, with more radios.

      Loading...

Size

There are three sizes available: large, medium, and small. It can coordinate with input box.

      Loading...

API#

[nz-radio] | [nz-radio-button]directive#

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

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]directive#

you can get NzRadioComponent via ViewChild

Name	Description
`blur()`	remove focus
`focus()`	get focus