Primitives

Radio

Selection within a group.

Indie Plan

For those who want to are just starting out

Growth Plan

For those who want to grow their business

Unicorn Plan

For those who are going to the moon

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]
ngpRadioGroupValue
T | null

The value of the radio group.

ngpRadioGroupDisabled
boolean

Whether the radio group is disabled.

ngpRadioGroupOrientation
NgpOrientation
default: "'horizontal'"

The orientation of the radio group.

ngpRadioGroupCompareWith
(a: T | null
default: "(a, b) => a === b"

The comparator function for the radio group. This is useful if values are objects and you want to compare them by value, not by reference.

ngpRadioGroupValueChange
T | null

Event emitted when the radio group value changes.

Data Attributes

The following data attributes are applied to the ngpRadioGroup directive:

Attribute Description Value
data-orientation The orientation of the radio group. vertical | horizontal
data-disabled Applied when the radio group is disabled. -

NgpRadioItem

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

  • Selector: [ngpRadioItem]
ngpRadioItemValue
T | undefined

The value of the radio item.

ngpRadioItemDisabled
boolean
default: "false"

Whether the radio item is disabled.

Data Attributes

The following data attributes are applied to the ngpRadioItem directive:

Attribute Description
data-checked Applied when the radio item is checked.
data-disabled Applied when the radio item is disabled.
data-hover Applied when the radio item is hovered.
data-focus-visible Applied when the radio item is focused.
data-press Applied when the radio item is pressed.

NgpRadioIndicator

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

  • Selector: [ngpRadioIndicator]

Data Attributes

The following data attributes are applied to the ngpRadioItem directive:

Attribute Description
data-checked Applied when the radio item is checked.
data-disabled Applied when the radio item is disabled.
data-hover Applied when the radio item is hovered.
data-press Applied when the radio item is pressed.

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.

Copyright © 2025 Angular Primitives