RadioGroup

Gestiona una elección exclusiva con un modelo tipado, navegación por teclado y Signal Forms.

Categoría: Formularios y selección
Import: @neural-ui/core/radio
Selector: neu-radio-group

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

Uso

RadioGroup gestiona un valor seleccionado o null. Proyecta componentes Radio con valores distintos, un nombre claro para el grupo y una etiqueta visible en cada opción.

Utiliza direction para elegir una distribución vertical u horizontal. Las opciones deshabilitadas no participan en la interacción; readonly conserva la elección actual. Enlaza el formulario al grupo, no a cada Radio.

Signal Forms

Enlaza FormField al control que gestiona el valor y añade required al esquema del formulario. Selecciona un destino, sal del campo para marcarlo como visitado y restablécelo para comprobar el valor y la validación. La marca de obligatorio no valida por sí sola el formulario.

Guía de Signal Forms

Madrid

Lisboa

París

Roma

Valor: — · Válido: false

Prueba y configura

Cambia las opciones e interactúa con el control. La vista previa, el valor de la aplicación y el template generado permanecen juntos. Un destino deshabilitado permite comprobar que no se pueden seleccionar opciones no disponibles.

Vista previa

RadioGroup coordina sus opciones Radio: un único valor seleccionado, estado compartido del formulario y navegación con flechas.

Madrid

Lisboa

París

Roma

Valor actual de la aplicación

Deshabilitado

Solo lectura

Obligatorio

Estado inválido

Dirección

Opciones avanzadas · 6

Template generado: refleja las opciones anteriores. Los imports y el estado están en la pestaña Código.

<neu-radio-group
  [(value)]="destination"
  direction="column"
  [ariaLabel]="'Destino'"
>
  <neu-radio value="madrid" label="Madrid" />
  <neu-radio value="lisbon" label="Lisboa" />
  <neu-radio value="paris" label="París" />
  <neu-radio value="rome" label="Roma" [disabled]="true" />
</neu-radio-group>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

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

export const destination = signal(null);

Inputs de datos, callbacks y configuración estructurada

Estos inputs requieren un modelo o función, no un checkbox. Modifica el campo del mismo nombre en el componente de Código y enlázalo al template; los datos que ya usa esta vista previa se muestran en el estado anterior.

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

En Código: define compareWith con este tipo y utiliza [compareWith]="compareWith" (o compareWith() si es una signal).

errors · readonly ValidationError.WithOptionalFieldTree[]

En Código: define errors con este tipo y utiliza [errors]="errors" (o errors() si es una signal).

value · V | null

En Código: define value con este tipo y utiliza [value]="value" (o value() si es una signal).

Valor y eventos

Usa una sola fuente de verdad: [(value)]="destination" o [value]="destination()" junto con (valueChange)="destination.set($event)". No combines las dos formas de enlace.

Los Inputs configuran el control. valueChange sincroniza su modelo; los demás Outputs comunican las acciones o fases documentadas. Las solicitudes de sugerencias, hijos o ventanas remotas requieren que la aplicación proporcione los datos.

Accesibilidad y teclado

Da al grupo un nombre accesible y a cada Radio una etiqueta visible. Prueba Tab, flechas y Espacio. Mantén valores distintos y evita introducir controles interactivos adicionales dentro de la etiqueta de un radio.

Tecla	Acción
`Tab`	Entra y sale del grupo de radios.
`Arrow keys`	Se mueve entre las opciones de radio habilitadas.
`Space`	Selecciona la opción enfocada cuando la interacción está permitida.

API

La referencia muestra los Inputs, modelos, Outputs y Templates públicos del paquete de Core fijado. Pulsa un tipo con nombre para abrir su definición. Cada Template aplicable tiene un ejemplo ejecutable y su código real.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`ariaLabel`	`string`	`''`	`[ariaLabel]`	Nombre accesible cuando no hay una etiqueta visible.
`compareWith`	`(left: V, right: V) => boolean`	`Object.is`Valor derivado	`[compareWith]`	Función para comparar valores seleccionados; utiliza una identidad de dominio estable.
`direction`	`"row" \| "column"`	`'column'`	`[direction]`	Distribuye los radios en vertical u horizontal.
`dirty`	`boolean`	`false`	`[dirty]`	Estado del formulario que indica que el usuario ha cambiado el valor.
`disabled`	`boolean`	`false`	`[disabled]`	Deshabilita la interacción del usuario; las opciones deshabilitadas no se pueden seleccionar.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Errores de validación proporcionados por el formulario o la aplicación.
`hidden`	`boolean`	`false`	`[hidden]`	Oculta el control según el estado del formulario.
`invalid`	`boolean`	`false`	`[invalid]`	Muestra el estado inválido; no añade una regla de validación.
`name`	`string`	`''`	`[name]`	Nombre asociado al control nativo del formulario.
`pending`	`boolean`	`false`	`[pending]`	Estado del formulario que indica que hay una validación asíncrona pendiente.
`readonly`	`boolean`	`false`	`[readonly]`	Mantiene el valor visible sin permitir que el usuario lo cambie.
`required`	`boolean`	`false`	`[required]`	Marca el campo como obligatorio; utiliza un validador del formulario para exigirlo.
`touched`	`boolean`	`false`	`[touched]`	Estado del formulario que indica que el control ha sido visitado.

Models

Un modelo admite [(propiedad)]="signal" o la pareja [propiedad] y (propiedadChange). Elige una de las dos formas, no ambas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`value`	`V \| null`	`null`	`[(value)]`	Valor de la opción seleccionada o null. Enlaza mediante [(value)] o [value] y (valueChange).

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Nombre	Valor emitido	Uso en el template	Descripción
`touch`	`void`	`(touch)="onTouch($event)"`	Notifica al formulario que el control ha sido visitado; no es un cambio de valor.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Nombre	Mecanismo	Contrato
`*` Contenido proyectado Ver ejemplo	Proyección de contenido Contenido proporcionado por la aplicación.	`<ng-content />` Contexto utilizado: `—`

Cada ejemplo muestra un template diferente. Alterna entre Demo y Código para consultar su implementación, imports y estado.

Opciones Radio proyectadas

*

Madrid

Lisboa

París

Roma

Valor: — · Válido: false

Estilos y tokens

Carga los estilos de Core una sola vez. Utiliza los tokens públicos para personalizaciones locales o un preset para cambios de toda la aplicación. Conserva la legibilidad de etiquetas, foco, opciones seleccionadas y estados deshabilitados en modo claro y oscuro.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
Sin datos