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>

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

Define the selected value. Define the disabled state.

Define the orientation.

Event emitted when the selection changes.

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

Define the value of this item. Define the disabled state.

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	The disabled state of the radio item.	true | false

Data Attributes

The following data attributes are applied to the ngpRadioItem directive:

Attribute	Description	Value
data-checked	The checked state of the radio item.	true | false
data-disabled	The disabled state of the radio item.	true | false
data-hover	The hover state of the radio item.	true | false
data-focus-visible	The focus state of the radio item.	true | false
data-press	The press state of the radio item.	true | false

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:

Attribute	Description	Value
data-checked	The checked state of the radio item.	true | false
data-disabled	The disabled state of the radio item.	true | false
data-hover	The hover state of the radio indicator.	true | false
data-press	The press state of the radio indicator.	true | false

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.