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

Comfortable

Compact

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HlmLabelImports } from '@spartan-ng/helm/label';
import { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';

@Component({
	selector: 'spartan-radio-group-preview',
	imports: [FormsModule, HlmRadioGroupImports, HlmLabelImports],
	template: `
		<hlm-radio-group [(ngModel)]="spacing">
			<div class="flex items-center gap-3">
				<hlm-radio value="default" id="r1" disabled>
					<hlm-radio-indicator indicator />
				</hlm-radio>
				<label hlmLabel for="r1">Default</label>
			</div>
			<div class="flex items-center gap-3">
				<hlm-radio value="comfortable" id="r2">
					<hlm-radio-indicator indicator />
				</hlm-radio>
				<label hlmLabel for="r2">Comfortable</label>
			</div>
			<div class="flex items-center gap-3">
				<hlm-radio value="compact" id="r3">
					<hlm-radio-indicator indicator />
				</hlm-radio>
				<label hlmLabel for="r3">Compact</label>
			</div>
		</hlm-radio-group>
	`,
})
export class RadioGroupPreview {
	public spacing = 'comfortable';
}

Installation

ng g @spartan-ng/cli:ui radiogroup

Usage

import { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';

<hlm-radio-group>
  <div class="flex items-center gap-3">
    <hlm-radio value="option-one" id="option-one">
      <hlm-radio-indicator indicator />
    </hlm-radio>
    <label hlmLabel for="option-one"> option-one</label>
  </div>
  <div class="flex items-center gap-3">
    <hlm-radio value="option-two" id="option-two">
      <hlm-radio-indicator indicator />
    </hlm-radio>
    <label hlmLabel for="option-two"> option-two</label>
  </div>
</hlm-radio-group>

Examples

Card Layout

Card

PayPal

Apple

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCreditCard } from '@ng-icons/lucide';
import { remixAppleFill, remixPaypalFill } from '@ng-icons/remixicon';
import { HlmIconImports } from '@spartan-ng/helm/icon';
import { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';
import { hlm } from '@spartan-ng/helm/utils';

@Component({
	selector: 'spartan-radio-card-preview',
	providers: [provideIcons({ lucideCreditCard, remixPaypalFill, remixAppleFill })],
	imports: [FormsModule, HlmRadioGroupImports, NgIcon, HlmIconImports],
	template: `
		<hlm-radio-group class="grid grid-cols-3 gap-4" [(ngModel)]="payment">
			<label class="flex items-center" hlmLabel [class]="cardClass">
				<hlm-radio value="card">
					<ng-icon hlm name="lucideCreditCard" class="mb-3" />
				</hlm-radio>
				Card
			</label>
			<label class="flex items-center" hlmLabel [class]="cardClass">
				<hlm-radio value="paypal">
					<ng-icon hlm name="remixPaypalFill" class="mb-3" />
				</hlm-radio>
				PayPal
			</label>
			<label class="flex items-center" hlmLabel [class]="cardClass">
				<hlm-radio value="apple">
					<ng-icon hlm name="remixAppleFill" class="mb-3" />
				</hlm-radio>
				Apple
			</label>
		</hlm-radio-group>
	`,
})
export class RadioGroupCard {
	public payment = 'card';

	public readonly cardClass = hlm(
		'relative block space-x-0',
		// base card styles
		'border-border flex flex-col items-center justify-center rounded-lg border-2 px-4 py-8',
		// hover and background styles
		'bg-background hover:bg-accent/10 cursor-pointer transition-colors',
		// spacing for the icon and text
		'[&>span]:mt-4',
		// target the checked state properly
		'[&:has([data-checked=true])]:border-primary [&:has([data-checked=true])]:border-2',
	);
}

Form

import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmLabelImports } from '@spartan-ng/helm/label';
import { HlmRadioGroupImports } from '@spartan-ng/helm/radio-group';

@Component({
	selector: 'spartan-radio-group-form',
	imports: [HlmRadioGroupImports, HlmLabelImports, HlmButtonImports, ReactiveFormsModule],
	template: `
		<form class="space-y-6" [formGroup]="form" (ngSubmit)="submit()">
			<div class="flex flex-col gap-3">
				<label hlmLabel>Subscription Plan</label>
				<hlm-radio-group formControlName="plan">
					<div class="flex items-center gap-3">
						<hlm-radio value="monthly" id="monthly">
							<hlm-radio-indicator indicator />
						</hlm-radio>
						<label hlmLabel for="monthly">Monthly ($9.99/month)</label>
					</div>
					<div class="flex items-center gap-3">
						<hlm-radio value="yearly" id="yearly">
							<hlm-radio-indicator indicator />
						</hlm-radio>
						<label hlmLabel for="yearly">Yearly ($99.99/year)</label>
					</div>
					<div class="flex items-center gap-3">
						<hlm-radio value="lifetime" id="lifetime">
							<hlm-radio-indicator indicator />
						</hlm-radio>
						<label hlmLabel for="lifetime">Lifetime ($299.99)</label>
					</div>
				</hlm-radio-group>
			</div>
			<button hlmBtn type="submit">Submit</button>
		</form>
	`,
})
export class RadioGroupFormPreview {
	private readonly _formBuilder = inject(FormBuilder);
	public form = this._formBuilder.group({
		plan: ['monthly', Validators.required],
	});

	submit() {
		console.log(this.form.value);
	}
}

Brain API

BrnRadioGroup

Selector: [brnRadioGroup]

Inputs

Prop	Type	Default	Description
name	unknown	`brn-radio-group-${++BrnRadioGroup._nextUniqueId}`	-
disabled	boolean	false	Whether the radio group is disabled.
required	boolean	false	Whether the radio group should be required.
direction	'ltr' \| 'rtl' \| null	ltr	The direction of the radio group.
value	T	-	The value of the selected radio button.

Outputs

Prop	Type	Default	Description
valueChange	T	-	Emits when the value changes.
change	BrnRadioChange<T>	-	Event emitted when the group value changes.
valueChanged	T	-	The value of the selected radio button.

BrnRadio

Selector: brn-radio

ExportAs: brnRadio

Inputs

Prop	Type	Default	Description
disabled	boolean	false	Whether the radio button is disabled.
id	string \| undefined	undefined	The unique ID for the radio button input. If none is supplied, it will be auto-generated.
aria-label	string \| undefined	undefined	-
aria-labelledby	string \| undefined	undefined	-
aria-describedby	string \| undefined	undefined	-
value* (required)	T	-	The value this radio button represents.
required	boolean	false	Whether the radio button is required.

Outputs

Prop	Type	Default	Description
change	BrnRadioChange<T>	-	Event emitted when the checked state of this radio button changes.

Helm API

HlmRadioGroup

Selector: hlm-radio-group

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmRadioIndicator

Selector: hlm-radio-indicator

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmRadio

Selector: hlm-radio

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-
id	string \| undefined	undefined	Used to set the id on the underlying brn element.
aria-label	string \| undefined	undefined	Used to set the aria-label attribute on the underlying brn element.
aria-labelledby	string \| undefined	undefined	Used to set the aria-labelledby attribute on the underlying brn element.
aria-describedby	string \| undefined	undefined	Used to set the aria-describedby attribute on the underlying brn element.
value* (required)	T	-	The value this radio button represents.
required	unknown	false	Whether the checkbox is required.
disabled	unknown	false	Whether the checkbox is disabled.

Outputs

Prop	Type	Default	Description
change	BrnRadioChange<T>	-	Event emitted when the checked state of this radio button changes.

Resizable

Progress

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.