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.

Default

The standard radio group with multiple options and accessible labels.

Card Layout

Radio buttons styled as interactive cards, often used for payment methods or plan selection.

Form

Using Radio Group within an Angular Reactive Form with validation.

Subscription Plan

API Reference

Brain API

The brain directives provide the functional logic and state management for the radio group.

DirectiveSelectorInputs / Outputs
BrnRadioGroupbrn-radio-group, [brnRadioGroup]
  • value: any
  • disabled: boolean
  • required: boolean
  • valueChange: EventEmitter<any>
BrnRadiobrn-radio, [brnRadio]
  • value: any
  • disabled: boolean

Helm API

The helm directives provide the default spartan/ui styling for the radio group.

Component / DirectiveSelectorDescription
HlmRadioGrouphlm-radio-group, [hlmRadioGroup]Main container with grid layout.
HlmRadiohlm-radio Individual radio item wrapper that handles states and layout.
HlmRadioIndicatorhlm-radio-indicatorThe visual circle indicator showing the checked state.

Installation & Usage

Installation

Imports

Basic Skeleton