Radio

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.

Examples

The simplest use.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-radio-basic',
  template: `
    <label nz-radio>Radio</label>
  `
})
export class NzDemoRadioBasicComponent {}

A group of nz-radio components.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-radio-radiogroup',
  template: `
    <nz-radio-group [(ngModel)]="radioValue">
      <label nz-radio nzValue="A">A</label>
      <label nz-radio nzValue="B">B</label>
      <label nz-radio nzValue="C">C</label>
      <label nz-radio nzValue="D">D</label>
    </nz-radio-group>
  `
})
export class NzDemoRadioRadiogroupComponent {
  radioValue = 'A';
}

Render radios by configuring options.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-radio-radiogroup-options',
  template: `
    <div>
      <nz-radio-group [(ngModel)]="radioValue">
        <label nz-radio [nzValue]="o.value" *ngFor="let o of options">{{ o.label }}</label>
      </nz-radio-group>
      <nz-radio-group [(ngModel)]="radioValue">
        <label nz-radio [nzValue]="o.value" *ngFor="let o of options">{{ o.label }}</label>
      </nz-radio-group>
      <nz-radio-group [(ngModel)]="radioValue">
        <label nz-radio [nzValue]="o.value" *ngFor="let o of options">{{ o.label }}</label>
      </nz-radio-group>
    </div>
  `
})
export class NzDemoRadioRadiogroupOptionsComponent {
  radioValue = 'Apple';
  options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Pear', value: 'Pear' },
    { label: 'Orange', value: 'Orange' }
  ];
}

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.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-radio-radiogroup-with-name',
  template: `
    <nz-radio-group [(ngModel)]="radioValue" nzName="radiogroup">
      <label nz-radio nzValue="A">A</label>
      <label nz-radio nzValue="B">B</label>
      <label nz-radio nzValue="C">C</label>
      <label nz-radio nzValue="D">D</label>
    </nz-radio-group>
  `
})
export class NzDemoRadioRadiogroupWithNameComponent {
  radioValue = 'A';
}

Solid radio button style.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-radio-solid',
  template: `
    <div>
      <nz-radio-group [(ngModel)]="radioValue" [nzButtonStyle]="'solid'">
        <label nz-radio-button nzValue="A">Hangzhou</label>
        <label nz-radio-button nzValue="B">Shanghai</label>
        <label nz-radio-button nzValue="C">Beijing</label>
        <label nz-radio-button nzValue="D">Chengdu</label>
      </nz-radio-group>
    </div>
  `
})
export class NzDemoRadioSolidComponent {
  radioValue = 'A';
}

nz-radio unavailable.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-radio-disable',
  template: `
    <div>
      <label nz-radio [nzDisabled]="disabled">Disabled</label>
      <br />
      <label nz-radio [nzDisabled]="disabled" [ngModel]="true">Disabled</label>
      <div style="margin-top:20px;">
        <button nz-button nzType="primary" (click)="disabled = !disabled">Toggle disabled</button>
      </div>
    </div>
  `
})
export class NzDemoRadioDisableComponent {
  disabled = true;
}

Vertical nz-radio-group, with more radios.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-radio-radiogroup-more',
  template: `
    <nz-radio-group [(ngModel)]="radioValue">
      <label nz-radio [ngStyle]="style" nzValue="A">Option A</label>
      <label nz-radio [ngStyle]="style" nzValue="B">Option B</label>
      <label nz-radio [ngStyle]="style" nzValue="C">Option C</label>
      <label nz-radio [ngStyle]="style" nzValue="M">
        More...
        <input type="text" nz-input *ngIf="radioValue == 'M'" style="width: 100px; margin-left: 10px;" />
      </label>
    </nz-radio-group>
  `,
  styles: [
    `
      [nz-radio] {
        display: block;
      }
    `
  ]
})
export class NzDemoRadioRadiogroupMoreComponent {
  radioValue = 'A';
  style = {
    display: 'block',
    height: '30px',
    lineHeight: '30px'
  };
}

The combination of radio button style.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-radio-radiobutton',
  template: `
    <div>
      <nz-radio-group [(ngModel)]="radioValue">
        <label nz-radio-button nzValue="A">Hangzhou</label>
        <label nz-radio-button nzValue="B">Shanghai</label>
        <label nz-radio-button nzValue="C">Beijing</label>
        <label nz-radio-button nzValue="D">Chengdu</label>
      </nz-radio-group>
    </div>
    <div style="margin-top:16px;">
      <nz-radio-group [(ngModel)]="radioValue">
        <label nz-radio-button nzValue="A">Hangzhou</label>
        <label nz-radio-button nzValue="B" nzDisabled>Shanghai</label>
        <label nz-radio-button nzValue="C">Beijing</label>
        <label nz-radio-button nzValue="D">Chengdu</label>
      </nz-radio-group>
    </div>
    <div style="margin-top:16px;">
      <nz-radio-group [(ngModel)]="radioValue">
        <label nz-radio-button nzValue="A" nzDisabled>Hangzhou</label>
        <label nz-radio-button nzValue="B" nzDisabled>Shanghai</label>
        <label nz-radio-button nzValue="C" nzDisabled>Beijing</label>
        <label nz-radio-button nzValue="D" nzDisabled>Chengdu</label>
      </nz-radio-group>
    </div>
  `
})
export class NzDemoRadioRadiobuttonComponent {
  radioValue = 'A';
}

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-radio-size',
  template: `
    <div>
      <nz-radio-group [(ngModel)]="radioValue" [nzSize]="'large'">
        <label nz-radio-button nzValue="A">Hangzhou</label>
        <label nz-radio-button nzValue="B">Shanghai</label>
        <label nz-radio-button nzValue="C">Beijing</label>
        <label nz-radio-button nzValue="D">Chengdu</label>
      </nz-radio-group>
    </div>
    <div style="margin-top:16px;">
      <nz-radio-group [(ngModel)]="radioValue">
        <label nz-radio-button nzValue="A">Hangzhou</label>
        <label nz-radio-button nzValue="B">Shanghai</label>
        <label nz-radio-button nzValue="C">Beijing</label>
        <label nz-radio-button nzValue="D">Chengdu</label>
      </nz-radio-group>
    </div>
    <div style="margin-top:16px;">
      <nz-radio-group [(ngModel)]="radioValue" [nzSize]="'small'">
        <label nz-radio-button nzValue="A">Hangzhou</label>
        <label nz-radio-button nzValue="B">Shanghai</label>
        <label nz-radio-button nzValue="C">Beijing</label>
        <label nz-radio-button nzValue="D">Chengdu</label>
      </nz-radio-group>
    </div>
  `
})
export class NzDemoRadioSizeComponent {
  radioValue = 'A';
}

API#

Import this Component Individually#

You can get more detail here.

import { NzRadioModule } from 'ng-zorro-antd';

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

PropertyDescriptionTypeDefault
[nzAutoFocus]get focus when component mountedbooleanfalse
[nzDisabled]Disable radiobooleanfalse
[ngModel]Specifies whether the radio is selected, double bindingbooleanfalse
[nzValue]use with nz-radio-groupstring-
(ngModelChange)The callback function that is triggered when the state changes.EventEmitter<boolean>-

nz-radio-group#

radio group,wrap a group of nz-radio

PropertyDescriptionTypeDefault
[ngModel]current selected nz-radio value, double bindingstring-
[nzName]The name property of all input[type="radio"] childrenstring-
[nzDisabled]Disable all radio buttonsbooleanfalse
[nzSize]Size, only on radio style'large'|'small'|'default''default'
(ngModelChange)the callback function when current selected nz-radio value changeEventEmitter<string>-
[nzButtonStyle]style type of radio button'outline'|'solid''outline'

Methods#

[nz-radio]#

NameDescription
blur()remove focus
focus()get focus