Saltar al contenido principal
Neural UIv2.0.0Documentación
Ver v1 GitHub

Radio

Representa una opción dentro de un RadioGroup accesible.

Categoría
Formularios y selección
Import
@neural-ui/core/radio
Selector
neu-radio
import { NeuRadioComponent } from '@neural-ui/core/radio';

Uso

Radio proporciona el valor y la etiqueta de una opción. Colócalo dentro de RadioGroup: el grupo gestiona el valor seleccionado, el formulario y el comportamiento por teclado.

Radio no tiene un modelo de valor ni Outputs propios. Su value es un Input que identifica la opción, no la selección actual del grupo. Escucha valueChange del grupo para observar cambios de selección.

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

Signal Forms

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.

Prueba y configura
Vista previa

Radio representa una opción. Su grupo gestiona el valor seleccionado y la navegación por teclado.

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

template.html
<neu-radio-group
  [(value)]="destination"
  [ariaLabel]="label"
  direction="column"
>
  <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>

Valor y eventos

Radio proporciona el valor y la etiqueta de una opción. Colócalo dentro de RadioGroup: el grupo gestiona el valor seleccionado, el formulario y el comportamiento por teclado.

Radio no tiene un modelo de valor ni Outputs propios. Su value es un Input que identifica la opción, no la selección actual del grupo. Escucha valueChange del grupo para observar cambios de selección.

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
disabledbooleanfalse[disabled]Deshabilita la interacción del usuario; las opciones deshabilitadas no se pueden seleccionar.
inputIdstringinject(NeuIdGenerator).getId('neu-radio-')Valor derivado[inputId]Identificador del input nativo para asociar etiquetas y accesibilidad.
labelstring''[label]Etiqueta visible de esta opción de radio.
valueVObligatorio[value]Valor de la opción que selecciona el RadioGroup contenedor.

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.

Este componente no expone proyección de contenido ni templates públicos de personalización.

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
--neu-border-hover Bordes de controles al pasar el puntero Compartido con otros consumidores de Core; limita el cambio a un ámbito. rgba(15, 23, 42, 0.16)
--neu-primary Color de marca en controles activos y énfasis Compartido con otros consumidores de Core; limita el cambio a un ámbito. #007aff
--neu-surface Superficie principal del campo, cabecera o control Compartido con otros consumidores de Core; limita el cambio a un ámbito. #ffffff
--neu-text Color del texto principal y de los iconos que lo heredan Compartido con otros consumidores de Core; limita el cambio a un ámbito. #0f172a
--neu-font-sans Tipografía del texto Compartido con otros consumidores de Core; limita el cambio a un ámbito. 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--neu-radius-full Radio de esquina Compartido con otros consumidores de Core; limita el cambio a un ámbito. 9999px
--neu-space-3 Separación entre contenido y controles Compartido con otros consumidores de Core; limita el cambio a un ámbito. 0.75rem
--neu-text-sm Tamaño del texto Compartido con otros consumidores de Core; limita el cambio a un ámbito. 0.875rem