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.
• styles: How component styles should be generated. css (default) includes the full example styles; unstyled omits them entirely so you can style the component yourself.
• example-styles (deprecated): still supported for compatibility - true maps to styles: css, false maps to styles: unstyled.

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 checked radio button, or the first enabled radio button when none is checked. Clearing the value leaves the tab stop where it was, so focus returns to the radio button that held it.
• 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.