Spartans get ready! v1 is coming!

We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.

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">
			<label class="flex items-center gap-3" hlmLabel>
				<hlm-radio value="default">
					<hlm-radio-indicator indicator />
				</hlm-radio>
				Default
			</label>
			<label class="flex items-center gap-3" hlmLabel>
				<hlm-radio value="comfortable">
					<hlm-radio-indicator indicator />
				</hlm-radio>
				Comfortable
			</label>
			<label class="flex items-center gap-3" hlmLabel>
				<hlm-radio value="compact">
					<hlm-radio-indicator indicator />
				</hlm-radio>
				Compact
			</label>
		</hlm-radio-group>
	`,
})
export class RadioGroupPreview {
	public spacing = 'comfortable';
}

Installation

npx nx g @spartan-ng/cli:ui radiogroup

Usage

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

<hlm-radio-group>
  <label class="flex items-center" hlmLabel>
		<hlm-radio value="16.1.4">
			<hlm-radio-indicator indicator />
		</hlm-radio>
		v16.1.4
	</label>
</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',
	);
}

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