RadioGroup

Manage an exclusive choice with a typed model, keyboard navigation and Signal Forms.

Category: Forms and selection
Import: @neural-ui/core/radio
Selector: neu-radio-group

import { NeuRadioGroupComponent } from '@neural-ui/core/radio';

Usage

RadioGroup owns one selected value or null. Project Radio components with distinct values, a clear group name and a visible label for each option.

Use direction to choose vertical or horizontal layout. Disabled options are excluded from interaction; readonly preserves the current choice. Keep form binding on the group, not on each Radio.

Bind FormField to the value-owning control and add required to the form schema. Select a destination, leave the field to mark it touched, and reset it to check both value and validation state. A required marker on its own does not validate your form.

Signal Forms guide

Madrid

Lisbon

Paris

Rome

Value: — · Valid: false

Try and configure

Change the settings below and interact with the live control. The preview, current application value and generated template stay together. A disabled destination lets you check that unavailable choices cannot be selected.

Live preview

RadioGroup coordinates its Radio options: one selected value, shared form state and arrow-key navigation.

Madrid

Lisbon

Paris

Rome

Current application value

Disabled

Readonly

Required

Invalid

Direction

Advanced options · 6

Generated template: reflects the settings above. Imports and state are in the Code tab.

<neu-radio-group
  [(value)]="destination"
  direction="column"
  [ariaLabel]="'Destination'"
>
  <neu-radio value="madrid" label="Madrid" />
  <neu-radio value="lisbon" label="Lisbon" />
  <neu-radio value="paris" label="Paris" />
  <neu-radio value="rome" label="Rome" [disabled]="true" />
</neu-radio-group>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const destination = signal(null);

Data, callback and structured configuration inputs

These inputs require a model or function, not a checkbox. Edit the same-named field in the Source component and bind it in the template; data already used by this preview appears in the state above.

compareWith · (left: V, right: V) => boolean

In Source: define compareWith with this type and use [compareWith]="compareWith" (or compareWith() for a signal).

errors · readonly ValidationError.WithOptionalFieldTree[]

In Source: define errors with this type and use [errors]="errors" (or errors() for a signal).

value · V | null

In Source: define value with this type and use [value]="value" (or value() for a signal).

Value and events

Use one source of truth: [(value)]="destination" or [value]="destination()" with (valueChange)="destination.set($event)". Do not bind both forms at once.

Inputs configure the control. valueChange synchronizes its model; the other Outputs report their documented actions or lifecycle. Requests for suggestions, children or remote windows require the application to supply data.

Accessibility and keyboard

Give the group an accessible name and each Radio a visible label. Test with Tab, arrow keys and Space. Keep option values distinct and avoid placing extra interactive controls inside a radio label.

Key	Action
`Tab`	Enters and leaves the radio group.
`Arrow keys`	Moves between enabled radio options.
`Space`	Selects the focused option when interaction is allowed.

API

The reference lists the public Inputs, models, Outputs and Templates from the pinned Core package. Click a named type to open its definition. Each applicable Template has an executable example and its actual source.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`ariaLabel`	`string`	`''`	`[ariaLabel]`	Accessible name when no visible label is available.
`compareWith`	`(left: V, right: V) => boolean`	`Object.is`Derived default	`[compareWith]`	Comparison function for selected values; use stable domain identity.
`direction`	`"row" \| "column"`	`'column'`	`[direction]`	Arranges the radios vertically or horizontally.
`dirty`	`boolean`	`false`	`[dirty]`	Form state indicating that the user has changed the value.
`disabled`	`boolean`	`false`	`[disabled]`	Disables user interaction; disabled options cannot be selected.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Validation errors supplied by the form or the application.
`hidden`	`boolean`	`false`	`[hidden]`	Hides the control according to the form state.
`invalid`	`boolean`	`false`	`[invalid]`	Displays the invalid state; it does not add a validation rule.
`name`	`string`	`''`	`[name]`	Name associated with the native form control.
`pending`	`boolean`	`false`	`[pending]`	Form state indicating that asynchronous validation is pending.
`readonly`	`boolean`	`false`	`[readonly]`	Keeps the value readable without allowing the user to change it.
`required`	`boolean`	`false`	`[required]`	Marks the field as required; use a form validator to enforce it.
`touched`	`boolean`	`false`	`[touched]`	Form state indicating that the control has been visited.

Models

A model supports [(property)]="signal" or the [property] and (propertyChange) pair. Choose one form, not both.

Name	Type	Default	Template binding	Description
`value`	`V \| null`	`null`	`[(value)]`	Selected option value or null. Bind with [(value)] or [value] and (valueChange).

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`touch`	`void`	`(touch)="onTouch($event)"`	Notifies the form that the control has been touched; not a value change.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`*` Projected content View example	Content projection Application-provided content.	`<ng-content />` Context used: `—`

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Projected radio options

*

Madrid

Lisbon

Paris

Rome

Value: — · Valid: false

Styles and tokens

Load Core styles once. Use the public tokens below for local customization or a preset for application-wide changes. Keep labels, focus, selected options and disabled states readable in both light and dark themes.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
No data