Radio

Selection within a group.

Usage

Assemble the radio directives in your template.

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

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

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

API Reference

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

NgpRadioGroupDirective

ngpRadioGroupValue

string | undefined

Define the selected value.

ngpRadioGroupDisabled

boolean

default:

"false"

Define the disabled state.

ngpRadioGroupOrientation

'vertical' | 'horizontal'

default:

"horizontal"

Define the orientation.

ngpRadioGroupValueChange

boolean

Event emitted when the selection changes.

NgpRadioItemDirective

ngpRadioItemValue

string

required

Define the value of this item.

ngpRadioItemDisabled

boolean

default:

"false"

Define the disabled state.

NgpRadioIndicatorDirective

There are no inputs or outputs for this directive.

Schematics

You can use our schematic to generate a new checkbox component.

Options

name

string

The name of the component.

project

string

The name of the project to add the component to.

path

string

The path to create the component.