The Radio component allows users to select exactly one option from a set of mutually exclusive choices.
Basic usage
<flx-radio-group [(ngModel)]="selectedOption">
<flx-radio value="option1" label="Option 1"></flx-radio>
<flx-radio value="option2" label="Option 2"></flx-radio>
<flx-radio value="option3" label="Option 3"></flx-radio>
</flx-radio-group>
Label text displayed next to the radio button
Value of this radio button option
Disables this radio button
Whether this radio button is selected
Radio group properties
Name attribute for the radio group (auto-generated if not provided)
Currently selected value in the group
Disables all radio buttons in the group
Marks the group as required
orientation
'horizontal' | 'vertical'
default:"vertical"
Layout direction of radio buttons
Events
Emitted when the selected value changes
Examples
Basic group
Horizontal layout
With descriptions
Reactive forms
Disabled options
<flx-radio-group
[(ngModel)]="paymentMethod"
orientation="vertical">
<flx-radio value="card" label="Credit Card"></flx-radio>
<flx-radio value="paypal" label="PayPal"></flx-radio>
<flx-radio value="bank" label="Bank Transfer"></flx-radio>
</flx-radio-group>
<p>Selected: {{ paymentMethod }}</p>
export class PaymentComponent {
paymentMethod = 'card';
}
<flx-radio-group
[(ngModel)]="size"
orientation="horizontal">
<flx-radio value="small" label="Small"></flx-radio>
<flx-radio value="medium" label="Medium"></flx-radio>
<flx-radio value="large" label="Large"></flx-radio>
</flx-radio-group>
<flx-radio-group [(ngModel)]="plan">
<flx-radio value="free">
<div class="radio-option">
<strong>Free Plan</strong>
<p>Perfect for getting started</p>
</div>
</flx-radio>
<flx-radio value="pro">
<div class="radio-option">
<strong>Pro Plan - $29/mo</strong>
<p>For growing teams</p>
</div>
</flx-radio>
<flx-radio value="enterprise">
<div class="radio-option">
<strong>Enterprise Plan</strong>
<p>Advanced features and support</p>
</div>
</flx-radio>
</flx-radio-group>
<form [formGroup]="settingsForm">
<flx-radio-group formControlName="theme">
<flx-radio value="light" label="Light"></flx-radio>
<flx-radio value="dark" label="Dark"></flx-radio>
<flx-radio value="auto" label="Auto"></flx-radio>
</flx-radio-group>
<flx-radio-group formControlName="language">
<flx-radio value="en" label="English"></flx-radio>
<flx-radio value="es" label="Spanish"></flx-radio>
<flx-radio value="fr" label="French"></flx-radio>
</flx-radio-group>
</form>
import { FormBuilder, Validators } from '@angular/forms';
export class SettingsComponent {
settingsForm = this.fb.group({
theme: ['light', Validators.required],
language: ['en', Validators.required]
});
constructor(private fb: FormBuilder) {}
}
<flx-radio-group [(ngModel)]="subscription">
<flx-radio value="basic" label="Basic - $9/mo"></flx-radio>
<flx-radio value="pro" label="Pro - $29/mo"></flx-radio>
<flx-radio
value="enterprise"
label="Enterprise - Contact us"
[disabled]="true">
</flx-radio>
</flx-radio-group>
Styling
flx-radio {
--flx-radio-size: 18px;
--flx-radio-border-color: #d1d5db;
--flx-radio-checked-border-color: #3b82f6;
--flx-radio-checked-background: #3b82f6;
--flx-radio-dot-color: #ffffff;
--flx-radio-disabled-opacity: 0.5;
--flx-radio-spacing: 12px;
}
flx-radio-group {
--flx-radio-group-gap: 12px;
}
Accessibility
The Radio component ensures full accessibility:
- Arrow keys navigate between options in a group
- Space key selects the focused option
role="radiogroup" and role="radio" for proper semanticsaria-checked reflects the selected statearia-required for required groups- Proper label association
Radio buttons are best for 2-5 options. For more options, consider using a Select component instead.