Radio overview

NbRadioComponent

The NbRadioComponent provides the same functionality as native <input type="radio"> with Nebular styles and animations.

Installation

Import NbRadioModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbRadioModule,
  ],
})
export class PageModule { }

Usage

Radio buttons should be wrapped in nb-radio-group to provide form bindings.

<nb-radio-group [(ngModel)]="selectedOption">
  <nb-radio value="1">Option 1</nb-radio>
  <nb-radio value="2">Option 2</nb-radio>
  <nb-radio value="3">Option 3</nb-radio>
</nb-radio-group>

You can disable some radios in the group using a disabled attribute.

NbRadioGroupComponent

The NbRadioGroupComponent is the wrapper for nb-radio button. It provides form bindings:

<nb-radio-group [(ngModel)]="selectedOption">
  <nb-radio value="1">Option 1</nb-radio>
  <nb-radio value="2">Option 2</nb-radio>
  <nb-radio value="3">Option 3</nb-radio>
</nb-radio-group>

Also, you can use value and valueChange for binding without forms.

<nb-radio-group [(value)]="selectedOption">
  <nb-radio value="1">Option 1</nb-radio>
  <nb-radio value="2">Option 2</nb-radio>
  <nb-radio value="3">Option 3</nb-radio>
</nb-radio-group>

Radio items name has to be provided through name input property of the radio group.

<nb-radio-group name="my-radio-group">
  ...
</nb-radio-group>

You can change radio group status by setting status input.

Also, you can disable the whole group using disabled attribute.

Radio group supports ngModel and reactive forms: