Radio
Native single-choice groups with typed data mapping, rich projected options, complete Forms support and deterministic keyboard navigation.
GET STARTED
Import
Import the canonical standalone group and projected option from the granular entry point.
Data-driven options
Map labels, values, icons and disabled state without changing the source collection.
Projected rich options
Use neural-radio children when an option needs structured content. Do not combine them with data options.
Vertical and horizontal
Orientation controls both layout and aria-orientation; keyboard arrows remain predictable.
Vertical
Horizontal
All Angular Forms adapters
One nullable value contract works with Signal Forms, Reactive Forms and template-driven forms.
Signal Forms
Reactive Forms
ngModel
States and Field composition
Disabled, readonly, required, invalid, pending and fluid states compose without replacing native semantics.
Disabled
Readonly
Semantic user events
selectionChange reports value, previousValue, original option and pointer/keyboard source. Programmatic writes stay silent.
Unstyled and typed slots
Native inputs and interaction survive while Tailwind owns the complete visual layer.
Contract boundaries
RadioGroup
Owns one nullable value and group navigation.
Radio
Owns one projected option and its rich label.
Application
Owns validation rules, persistence and clear actions.
ACCESSIBILITY
Native radio behavior
The visual control wraps real, named radio inputs rather than recreating browser semantics.
Native semantics
The container uses role=radiogroup. Each choice is a native input[type=radio] sharing a stable generated or consumer-provided name.
Keyboard
Arrow keys move and select while skipping disabled choices. Home and End select the first and last enabled choice; Space selects the focused choice.
Roving focus
Only the selected option, or the first enabled option when empty, has tabindex 0. focus() restores that deterministic entry point.
Readonly versus disabled
Readonly remains focusable and exposes aria-readonly while blocking mutation. Disabled uses native disabled inputs and leaves the tab order.
Field state
Field descriptions, required, invalid, busy, disabled, readonly and unstyled state are inherited by the complete group.
SSR and hydration
APP_ID-backed IDs and declarative rendering are deterministic; no browser global is required during server rendering.
PUBLIC API
Radio contracts
Canonical symbols are NeuralRadioGroup and NeuralRadio, with nullable generic values and typed semantic events.
Group inputs
| Input | Type | Default | Purpose |
|---|---|---|---|
| options | readonly TOption[] | [] | Data-driven choices; takes precedence over projected radios. |
| optionLabel | string | 'label' | Property used as visible option text. |
| optionValue | string | 'value' | Property mapped to the nullable value model. |
| optionDisabled | string | 'disabled' | Property that disables an individual option. |
| optionIcon | string | 'iconClass' | Property containing an option icon class. |
| orientation | 'vertical' | 'horizontal' | 'vertical' | Layout and ARIA orientation. |
| disabled | boolean | false | Disables every native radio input. |
| readonly | boolean | false | Keeps focus while blocking user mutation. |
| required | boolean | false | Marks every native input and group as required. |
| invalid | boolean | false | Exposes invalid state for ARIA and styling. |
| pending | boolean | false | Exposes aria-busy on the group. |
| touched / dirty | boolean | false | Forms state inputs retained for adapter parity. |
| fluid | boolean | false | Expands the group to available inline size. |
| radioGroupId | string | '' | Explicit stable group id. |
| radioName / name | string | '' | Shared native input name; name takes precedence. |
| ariaLabel / ariaLabelledby | string | '' | Accessible naming options for the radiogroup. |
| unstyled | boolean | false | Removes NeuralNg visual classes. |
| radioGroupClass | string | '' | Additive consumer root classes. |
| classes | NeuralRadioClasses | {} | Typed visual class slots. |
Projected Radio inputs
valueTValue · requiredValue committed when the projected option is selected.
disabledboolean · falseDisables this projected option.
iconClassstring · ''Optional icon; nt base class is normalized automatically.
radioClassstring · ''Additive classes for this projected option.
Models and outputs
valuemodel<TValue | null>Selected value; valueChange supports two-way binding.
selectionChangeNeuralRadioSelectionChangeUser-only semantic event with previous value, option and source.
touchvoidEmitted when focus leaves the complete group.
Methods
focus(options?)voidMoves focus to the selected or first enabled roving tab stop.
reset()voidRestores the nullable value model to null without a user event.
Typed class slots
rootRadiogroup layout.
optionEvery data or projected option label.
inputVisually hidden native radio input.
controlVisible circular control.
selectedControlSelected control state.
disabledOptionDisabled option state.
labelVisible option content.
optionIconOptional icon.
Public types
NeuralRadioOrientation'horizontal' | 'vertical'
NeuralRadioInteractionSource'keyboard' | 'pointer'
NeuralRadioSelectionChange<TValue, TOption>{ value; previousValue; option; source }
NeuralRadioClassesTyped root, option, input, control, state, label and icon slots.
Legacy aliases
RadioGroupComponent and RadioComponent remain deprecated compatibility aliases. New code and generated AI context use only the Neural-prefixed symbols.
DESIGN TOKENS
Radio tokens
Neutral defines the reference contract; every theme overrides these same semantic variables.
Layout and typography
--neural-radio-group-gapSpacing between group items.
--neural-radio-group-widthGroup inline size.
--neural-radio-gapSpacing between component items.
--neural-radio-sizeComponent width and height.
--neural-radio-mark-sizeMark width and height.
--neural-radio-control-offsetControl positional offset.
--neural-radio-font-familyComponent font family.
--neural-radio-font-sizeComponent font size.
--neural-radio-line-heightComponent line height.
Control and state
--neural-radio-backgroundComponent background surface.
--neural-radio-background-hoverHovered component background surface.
--neural-radio-borderComponent border shorthand.
--neural-radio-border-color-hoverHovered component border color.
--neural-radio-border-color-focusFocused component border color.
--neural-radio-border-color-selectedSelected component border color.
--neural-radio-border-color-invalidInvalid component border color.
--neural-radio-color-selectedSelected component foreground color.
--neural-radio-mark-colorMark foreground color.
--neural-radio-label-colorLabel foreground color.
--neural-radio-shadowComponent box shadow.
--neural-radio-shadow-focusFocused component box shadow.
--neural-radio-focus-ringComponent keyboard focus ring.
--neural-radio-focus-ring-offsetComponent focus ring offset.
--neural-radio-disabled-opacityDisabled opacity.
Motion
--neural-radio-transitionComponent CSS transition.
--neural-radio-mark-transitionMark CSS transition.
Reduced-motion preferences collapse these transitions automatically.