Radio Group
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrnRadioComponent, BrnRadioGroupComponent } from '@spartan-ng/ui-radiogroup-brain';
import { HlmRadioDirective, HlmRadioGroupDirective, HlmRadioIndicatorComponent } from '@spartan-ng/ui-radiogroup-helm';
import { HlmSmallDirective } from '@spartan-ng/ui-typography-helm';
@Component({
  selector: 'spartan-radio-group-preview',
  standalone: true,
  imports: [
    FormsModule,
    BrnRadioGroupComponent,
    BrnRadioComponent,
    HlmRadioIndicatorComponent,
    HlmRadioDirective,
    HlmRadioGroupDirective,
    HlmSmallDirective,
  ],
  template: `
    <small hlmSmall class="font-semibold">Choose a version</small>
    <brn-radio-group class="mb-4 font-medium text-sm font-mono space-y-1" hlm [(ngModel)]="version">
      <brn-radio hlm value="16.1.4">
        <hlm-radio-indicator indicator />
        v16.1.4
      </brn-radio>
      <brn-radio hlm value="16.0.0">
        <hlm-radio-indicator indicator />
        v16.0.0
      </brn-radio>
      <brn-radio hlm value="15.8.0">
        <hlm-radio-indicator indicator />
        v15.8.0
      </brn-radio>
      <brn-radio disabled hlm value="15.2.0">
        <hlm-radio-indicator indicator />
        v15.2.0
      </brn-radio>
    </brn-radio-group>
  `,
})
export class RadioGroupPreviewComponent {
  version: string | null = '16.1.4';
}Installation
npx nx g @spartan-ng/cli:ui radiogroup
ng g @spartan-ng/cli:ui radiogroup
Usage
import { BrnRadioComponent, BrnRadioGroupComponent } from '@spartan-ng/ui-radiogroup-brain';
import {
  HlmRadioDirective,
  HlmRadioGroupDirective,
  HlmRadioIndicatorComponent,
} from '@spartan-ng/ui-radiogroup-helm';<brn-radio-group hlm>
  <brn-radio hlm value="16.1.4">
    <hlm-radio-indicator indicator />
    v16.1.4
  </brn-radio>
</brn-radio-group>