Radio

Selection within a group.

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.

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.
• component-suffix: The suffix to apply to the generated component class name.
• file-suffix: The suffix to apply to the generated component file name. Defaults to component.
• example-styles: 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

NgpRadioItem

NgpRadioIndicator

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.