Radio

A radio button component for selecting a single option from a list.

PreviousNext
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
import { ZardRadioComponent } from '../radio.component';
 
@Component({
  selector: 'z-demo-radio-default',
  imports: [ZardRadioComponent, FormsModule],
  standalone: true,
  template: `
    <div class="flex flex-col gap-3">
      <span z-radio name="option" [(ngModel)]="selected" value="default">Default</span>
      <span z-radio name="option" [(ngModel)]="selected" value="comfortable">Comfortable</span>
      <span z-radio name="option" [(ngModel)]="selected" value="compact">Compact</span>
    </div>
  `,
})
export class ZardDemoRadioDefaultComponent {
  selected = 'default';
}

Installation

1

Run the CLI

Use the CLI to add the component to your project.

Loading...
1

Add the component files

Create the component directory structure and add the following files to your project.

Loading...

Examples

default

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
import { ZardRadioComponent } from '../radio.component';
 
@Component({
  selector: 'z-demo-radio-default',
  imports: [ZardRadioComponent, FormsModule],
  standalone: true,
  template: `
    <div class="flex flex-col gap-3">
      <span z-radio name="option" [(ngModel)]="selected" value="default">Default</span>
      <span z-radio name="option" [(ngModel)]="selected" value="comfortable">Comfortable</span>
      <span z-radio name="option" [(ngModel)]="selected" value="compact">Compact</span>
    </div>
  `,
})
export class ZardDemoRadioDefaultComponent {
  selected = 'default';
}

disabled

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
import { ZardRadioComponent } from '../radio.component';
 
@Component({
  selector: 'z-demo-radio-disabled',
  imports: [ZardRadioComponent, FormsModule],
  standalone: true,
  template: `
    <span z-radio name="radio" [(ngModel)]="val" value="a" [disabled]="true">Disabled</span>
    <span z-radio name="radio" [(ngModel)]="val" value="b" [disabled]="true">Disabled</span>
  `,
})
export class ZardDemoRadioDisabledComponent {
  val = 'a';
}

Radio API

Inputs

Name Type Default Description
class ClassValue '' Additional CSS classes
disabled boolean false Whether the radio is disabled
name string 'radio' Name attribute for the radio group
zId string auto-generated ID attribute for the radio
value unknown null Value of the radio button

Outputs

Name Type Description
radioChange EventEmitter<boolean> Emits when radio selection changes