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 { HlmLabel } from '@spartan-ng/helm/label';
import { HlmRadio, HlmRadioGroup, HlmRadioIndicator } from '@spartan-ng/helm/radio-group';
@Component({
selector: 'spartan-radio-group-preview',
imports: [FormsModule, HlmRadio, HlmRadioIndicator, HlmRadioGroup, HlmLabel],
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
ng g @spartan-ng/cli:ui radiogroup
Usage
import {
HlmRadio
HlmRadioGroup
HlmRadioIndicator
} 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>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 |
|---|---|---|---|
| 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. |
Examples
Card Layout
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 { hlm } from '@spartan-ng/brain/core';
import { HlmIcon } from '@spartan-ng/helm/icon';
import { HlmRadio, HlmRadioGroup } from '@spartan-ng/helm/radio-group';
@Component({
selector: 'spartan-radio-card-preview',
providers: [provideIcons({ lucideCreditCard, remixPaypalFill, remixAppleFill })],
imports: [FormsModule, HlmRadio, HlmRadioGroup, NgIcon, HlmIcon],
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(
'block space-x-0 relative',
// base card styles
'flex flex-col items-center justify-center py-8 px-4 rounded-lg border-2 border-border',
// 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-2 [&:has([data-checked=true])]:border-primary',
);
}