Radio

Selection within a group.

<div
  [(ngpRadioGroupValue)]="plan"
  ngpRadioGroup
  ngpRadioGroupOrientation="vertical"
>
  <div ngpRadioItem ngpRadioItemValue="indie">
    <div ngpRadioIndicator>
      <span class="indicator-dot"></span>
    </div>

    <p class="title">Indie Plan</p>
    <p class="description">For those who want to are just starting out</p>
  </div>

  <div ngpRadioItem ngpRadioItemValue="growth">
    <div ngpRadioIndicator>
      <span class="indicator-dot"></span>
    </div>

    <p class="title">Growth Plan</p>
    <p class="description">For those who want to grow their business</p>
  </div>

  <div ngpRadioItem ngpRadioItemValue="unicorn">
    <div ngpRadioIndicator>
      <span class="indicator-dot"></span>
    </div>

    <p class="title">Unicorn Plan</p>
    <p class="description">For those who are going to the moon</p>
  </div>
</div>

Import

Import the Radio primitives from ng-primitives/radio.

import { NgpRadioGroup, NgpRadioItem, NgpRadioIndicator } from 'ng-primitives/radio';

Usage

Assemble the radio directives in your template.

<div ngpRadioGroup [(ngpRadioGroupValue)]="value">
  <button ngpRadioItem ngpRadioItemValue="Option 1">
    <ng-icon ngpRadioIndicator name="dot" />
    Option 1
  </button>

  <button ngpRadioItem ngpRadioItemValue="Option 2">
    <ng-icon ngpRadioIndicator name="dot" />
    Option 2
  </button>

  <button ngpRadioItem ngpRadioItemValue="Option 3">
    <ng-icon ngpRadioIndicator name="dot" />
    Option 3
  </button>
</div>

Reusable Component

Create a reusable component that uses the radio directives.

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RadioGroup } from './radio-group';
import { RadioItem } from './radio-item';

@Component({
  selector: 'app-root',
  imports: [RadioGroup, RadioItem, FormsModule],
  template: `
    <app-radio-group [(ngModel)]="value" orientation="vertical">
      <app-radio-item value="1">One</app-radio-item>
      <app-radio-item value="2">Two</app-radio-item>
      <app-radio-item value="3">Three</app-radio-item>
    </app-radio-group>
  `,
})
export default class App {
  value = signal('1');
}

Schematics

Generate a reusable radio component using the Angular CLI.

ng g ng-primitives:primitive radio

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• componentSuffix: The suffix to apply to the generated component class name.
• fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
• exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

API Reference

The following directives are available to import from the ng-primitives/radio package:

NgpRadioGroup

Apply the ngpRadioGroup directive to an element that represents the group of radio items.

• Selector: [ngpRadioGroup]
• Exported As: ngpRadioGroup
• Host Directives: NgpRovingFocusGroup, NgpFormControl

NgpRadioItem

Apply the ngpRadioItem directive to an element that represents a radio item. This would typically be a button element.

• Selector: [ngpRadioItem]
• Exported As: ngpRadioItem
• Host Directives: NgpRovingFocusItem, NgpHover, NgpFocusVisible, NgpPress

Data Attributes

The following data attributes are applied to the ngpRadioGroup directive:

Data Attributes

The following data attributes are applied to the ngpRadioItem directive:

NgpRadioIndicator

Apply the ngpRadioIndicator directive to an element that represents the radio indicator (i.e. the dot).

• Selector: [ngpRadioIndicator]
• Exported As: ngpRadioIndicator
• Host Directives: NgpHover, NgpPress

Data Attributes

The following data attributes are applied to the ngpRadioItem directive:

Accessibility

Adheres to the Radio Group WAI-ARIA design pattern.

Keyboard Interaction

• Tab - Moves focus to the first radio button.
• Arrow Down - Moves focus to the next radio button (vertical orientation).
• Arrow Up - Moves focus to the previous radio button (vertical orientation).
• Arrow Right - Moves focus to the next radio button (horizontal orientation).
• Arrow Left - Moves focus to the previous radio button (horizontal orientation).
• Space - Selects the focused radio button if not already selected.