Radio | Neural Native

Importación

component.ts

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

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

Un plan a tu ritmo

Elige un único periodo y compara el total ilustrativo, la frecuencia de pago y el ahorro anual. Las prestaciones se mantienen en ambos periodos. Seleccionar una opción cambia la vista previa sin realizar una compra.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuDividerComponent } from '@neural-ui/native/divider';
import { NeuRadioGroupComponent } from '@neural-ui/native/radio';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuBadgeComponent, NeuDividerComponent, NeuRadioGroupComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="false"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Un plan a tu ritmo</text><text class="product-caption">Tus ideas merecen un poco de espacio</text></view>
    <view class="plan-summary"><view class="product-section"><text class="plan-kicker">NEURAL STUDIO</text><text class="plan-title">Espacio para crear</text><text class="plan-description">Un lugar compartido para tu próxima gran idea.</text></view>
    <view class="plan-price-row"><text class="plan-price">{{ plan() === 'annual' ? '120 €' : '12 €' }}</text><text class="plan-period">{{ plan() === 'annual' ? '/ año' : '/ mes' }}</text></view>
    <view class="plan-detail"><text class="plan-description">{{ plan() === 'annual' ? 'Equivale a 10 € al mes. Un pago anual de 120 €.': 'Un pago de 12 € cada mes. Sin compromiso anual.' }}</text></view></view>
    <view class="product-surface"><view class="product-row"><view class="product-copy"><text class="product-heading">Elige tu ritmo</text></view>@if (plan() === 'annual') { <neu-badge label="Ahorra 24 € al año" tone="success" /> }</view><neu-radio label="Plan de facturación" [options]="plans" [(value)]="plan" />
    <neu-divider /><text class="product-caption">Incluido en ambos periodos</text><view class="plan-features">@for (feature of features; track feature) { <view class="product-row"><view class="plan-feature-mark"><text class="plan-feature-check">✓</text></view><view class="product-copy"><text class="product-caption">{{ feature }}</text></view></view> }</view></view>
    <text class="product-caption">Plan y precios ilustrativos. Elegir un periodo no realiza ninguna compra.</text></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
.plan-summary { gap: 22px; padding: 22px; border-radius: 20px; background-color: #153760; }
.plan-kicker { color: #a8c8ee; font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: 1px; }
.plan-title { color: #f8fbff; font-size: 26px; line-height: 32px; font-weight: 600; }
.plan-description { color: #c1d4ec; font-size: 13px; line-height: 19px; }
.plan-price-row { flex-direction: row; align-items: flex-end; gap: 9px; }
.plan-price { color: #f8fbff; font-size: 40px; line-height: 46px; font-weight: 600; }
.plan-period { color: #c1d4ec; font-size: 14px; line-height: 22px; padding-bottom: 4px; }
.plan-detail { border-top-width: 1px; border-color: #36567d; padding-top: 14px; }
.plan-features { gap: 12px; }
.plan-feature-mark { width: 20px; height: 20px; border-radius: 10px; align-items: center; justify-content: center; background-color: #e2eee8; }
.plan-feature-check { color: #2d6751; font-size: 12px; line-height: 16px; font-weight: 600; }
  `,
})
export class ExampleComponent {
  readonly plans: readonly NeuOption[] = [
    {
      "id": "monthly",
      "label": "Mensual",
      "description": "Facturación flexible"
    },
    {
      "id": "annual",
      "label": "Anual",
      "description": "Un pago al año"
    }
  ];
  readonly plan = signal('monthly');
  readonly features = ['Borradores de proyecto ilimitados', 'Un espacio compartido para el equipo', 'Tus archivos e ideas, juntos'];
}

Validación y opciones desactivadas

Elige la entrega disponible para eliminar el error obligatorio.

Ver y copiar el ejemplo completo

validation-and-unavailable-choices.component.ts

import { Component, signal } from '@angular/core';
import { NeuRadioGroupComponent } from '@neural-ui/native/radio';
import { View, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuRadioGroupComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-radio label="Método de entrega obligatorio" [options]="delivery" [(value)]="deliveryMethod" [invalid]="!deliveryMethod()" [touched]="true" error="Elige un método de entrega." />
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly delivery = [{ id: 'standard', label: 'Estándar', description: 'Tres días laborables' }, { id: 'express', label: 'Urgente', description: 'No disponible para esta dirección', disabled: true }];
  readonly deliveryMethod = signal('');
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Radio · android · native capture — **Android**Captura nativa

Radio · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
options	readonly NeuOption[]	[]	Input	Opciones disponibles. Los valores seleccionados se refieren a sus IDs, no a las etiquetas visibles.
disabled	boolean	false	Input	Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.
readonly	boolean	false	Input	Impide editar o seleccionar desde el control y conserva el valor actual.
invalid	boolean	false	Input	Usa el color danger del tema para los contornos de las opciones y el punto seleccionado. Muestra error si se ha proporcionado. La aplicación gestiona la validación; invalid no modifica el valor seleccionado ni impide elegir una opción.
touched	boolean	false	Input	Estado de interacción con el campo, aportado manualmente o mediante Signal Forms.
error	string	''	Input	Mensaje de error aportado por la aplicación; combínalo con el estado invalid del control.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
value	string	''	Model · bidireccional	Valor editado o ID(s) seleccionado(s), según el tipo declarado. Enlaza una signal escribible mediante [(value)].

Outputs

Nombre	Payload	Cuándo se emite
valueChange	string	Emite el valor actualizado de value. [(value)] enlaza este output junto con su input model.
touch	void	Comunica la interacción del usuario al formulario o aplicación que lo contiene.

Estado de los models

Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.

model-fields.ts

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

// Fields inside your component class
readonly value = signal<string>('');

Tipos e interfaces de datos

Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.

NeuOption

NeuOption.ts

import type { NeuOption } from '@neural-ui/native';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuOption {
    readonly id: string;
    readonly label: string;
    readonly description?: string;
    readonly disabled?: boolean;
}

Campo	Tipo	Requisito	Significado
id	string	Obligatorio	Identificador estable y único para seguimiento y selección.
label	string	Obligatorio	Nombre legible del elemento.
description	string	Opcional	Texto de apoyo opcional; su presentación depende del control.
disabled	boolean	Opcional	Impide activar o seleccionar este elemento.