Radio
Group of mutually exclusive options. Use bloc-radio-group with ngModel, formControl, or formControlName.
Keyboard: Arrow keys to navigate, Space to select. ARIA: role="radiogroup", role="radio", aria-checked.
Sizes
Small
Tight layouts, table cells, or dense form rows.
Medium (default)
Standard form controls and most UI contexts.
Large
Touch targets, prominent CTAs, or accessibility-first interfaces.
States
Group disabled
All items disabled via [disabled] on the group.
Item disabled
One option disabled individually.
Disabled (selected)
Group disabled with a pre-selected value — e.g. read-only setting.
Label position
Label after (default)
Label before (group)
labelPosition="before" on the group.
Per-item override
Each item overrides the group default.
Horizontal layout
Row via CSS token
Override --bloc-radio-group-gap and flex direction with a class.
Template-driven (ngModel)
Two-way binding
Bound via [(ngModel)].
ngModel value: (none)
Reactive forms
FormControl
Bound via [formControl].
value: (none) | touched: false
setDisabledState
Enable/disable the group from code.
Custom token
Override colours via CSS custom properties.