ToggleButtonGroup | Neural UI v2

Uso

Usa mode="single" para un valor o null; mode="multiple" utiliza un array de solo lectura. deselectable permite desmarcar una opción activa. options admite entradas desactivadas e iconos de aplicación. El Template sustituye el contenido visual mientras Core conserva el estado pulsado y el botón nativo.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Valor actual: [ "week" ]

Eventos: 0

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

Valor actual: "week"

Eventos: 0

disabled

readonly

invalid

deselectable

Opciones avanzadas · 5

<neu-toggle-button-group
  mode="single"
  [options]="options()"
  [value]="value()"
  (valueChange)="acceptValue($event)"
  [size]="'md'"
  [deselectable]="true"
  [disabled]="false"
  [readonly]="false"
  [invalid]="false"
></neu-toggle-button-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 options = signal([
  {
    "label": "Día",
    "value": "day"
  },
  {
    "label": "Semana",
    "value": "week"
  },
  {
    "label": "Mes",
    "value": "month"
  },
  {
    "label": "No disponible",
    "value": "none",
    "disabled": true
  }
]);

export const value = signal("week");

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: NeuToggleValue<T, V>, right: NeuToggleValue<T, 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).

optionDisabled · NeuOptionDisabledAccessor<NeuToggleOptionModel<T, V>> | null

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

optionLabel · NeuOptionLabelAccessor<NeuToggleOptionModel<T, V>> | null

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

options · readonly NeuToggleOptionModel<T, V>[]

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

optionValue · (option: NeuToggleOptionModel<T, V>) => NeuToggleValue<T, V>

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

Estado y eventos

Usa mode="single" para un valor o null; mode="multiple" utiliza un array de solo lectura. deselectable permite desmarcar una opción activa. options admite entradas desactivadas e iconos de aplicación. El Template sustituye el contenido visual mientras Core conserva el estado pulsado y el botón nativo.

Accesibilidad y teclado

Las flechas mueven el foco entre opciones habilitadas; Intro/Espacio selecciona. Tab entra y sale del grupo.

Tecla	Acción
`Tab`	Entra o sale del grupo.
`Arrow keys`	Mueve el foco entre opciones disponibles; el movimiento horizontal respeta la dirección del texto.
`Home`	Enfoca la primera opción disponible.
`End`	Enfoca la última opción disponible.
`Enter`	Selecciona la opción enfocada.
`Space`	Selecciona la opción enfocada.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

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
`compareWith`	`(left: NeuToggleValue<T, V>, right: NeuToggleValue<T, V>) => boolean`	`Object.is`Valor derivado	`[compareWith]`	Función para comparar valores seleccionados; utiliza una identidad de dominio estable.
`deselectable`	`boolean`	`true`	`[deselectable]`	Permite desmarcar una opción ya seleccionada.
`dirty`	`boolean`	`false`	`[dirty]`	Estado del formulario que indica que el usuario ha cambiado el valor.
`disabled`	`boolean`	`false`	`[disabled]`	Impide interactuar con este control.
`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.
`mode`	`M`	`'single' as M`Valor derivado	`[mode]`	single admite un valor; multiple admite un array de valores de solo lectura.
`optionDisabled`	`NeuOptionDisabledAccessor<NeuToggleOptionModel<T, V>> \| null`	`null`	`[optionDisabled]`	Nombre de campo o función que indica si una opción está deshabilitada.
`optionLabel`	`NeuOptionLabelAccessor<NeuToggleOptionModel<T, V>> \| null`	`null`	`[optionLabel]`	Nombre de campo o función que obtiene la etiqueta visible de la opción.
`options`	`readonly NeuToggleOptionModel<T, V>[]`	`[]`	`[options]`	Registros de opciones cargados. Los accessors permiten usar tus propios objetos de dominio.
`optionValue`	`(option: NeuToggleOptionModel<T, V>) => NeuToggleValue<T, V>`	`(option) => resolveNeuOptionValue<NeuToggleOptionModel<T, V>, NeuToggleValue<T, V>>(option)`Valor derivado	`[optionValue]`	Nombre de campo o función que obtiene el valor guardado de la opción.
`pending`	`boolean`	`false`	`[pending]`	Estado del formulario que indica que hay una validación asíncrona pendiente.
`readonly`	`boolean`	`false`	`[readonly]`	Mantiene visible el valor aplicado, pero impide editarlo.
`required`	`boolean`	`false`	`[required]`	Marca el campo como obligatorio; utiliza un validador del formulario para exigirlo.
`size`	`NeuButtonSize`	`'md'`	`[size]`	Tamaño del control. El tipo indica la escala o unidad numérica admitida.
`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`	`NeuSelectionValue<NeuToggleValue<T, V>, M>`	`null as NeuSelectionValue<NeuToggleValue<T, V>, M>`Valor derivado	`[(value)]`	Valor editable del modelo gestionado por la aplicación.

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
`optionActivated`	`NeuOptionActivatedEvent<NeuToggleOptionModel<T, V>, NeuToggleValue<T, V>>`	`(optionActivated)="onOptionActivated($event)"`	Opción activada, su valor y el evento que la ha activado.
`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
`NeuToggleButtonItemDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuToggleButtonItem]`

NeuToggleButtonItemDirectiveVer ejemplo

Directiva pública de template

ng-template[neuToggleButtonItem]

Declaración

import { NeuToggleButtonItemDirective } from '@neural-ui/core/toggle-button-group';

// Declaración pública (solo referencia)
export declare class NeuToggleButtonItemDirective<T = unknown, V = NeuToggleValueNotProvided> {
}

Contexto completo

import { NeuToggleButtonItemDirective } from '@neural-ui/core/toggle-button-group';

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<{
    $implicit: NeuToggleOptionModel<T, V>;
    selected: boolean;
}>;

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

NeuToggleButtonItemDirective

NeuToggleButtonItemDirective

Valor actual: "week"

Eventos: 0

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

NeuButtonSizeTypeScript

NeuIconKeyTypeScript

NeuOptionAccessorTypeScript

import type { NeuOptionPath } from '@neural-ui/core/option-api';

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionAccessor<T, R = unknown> = Exclude<keyof T, string> | NeuOptionPath<T> | ((option: T) => R);

NeuOptionActivatedEventTypeScript

import type { NeuOptionActivatedEvent } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export interface NeuOptionActivatedEvent<T, V> {
  readonly option: T;
  readonly originalEvent?: Event;
  readonly source: 'pointer' | 'keyboard';
  readonly value: V;
}

NeuOptionDisabledAccessorTypeScript

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

import type { NeuOptionDisabledAccessor } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionDisabledAccessor<T> = NeuOptionAccessor<T, boolean>;

NeuOptionLabelAccessorTypeScript

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

import type { NeuOptionLabelAccessor } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionLabelAccessor<T> = NeuOptionAccessor<T, string>;

NeuOptionPathTypeScript

import type { NeuOptionPath } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuOptionPath<T> = Extract<keyof T, string> | `${Extract<keyof T, string>}.${string}`;

NeuSelectionModeTypeScript

import type { NeuSelectionMode } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuSelectionMode = 'single' | 'multiple';

NeuSelectionValueTypeScript

import type { NeuSelectionMode } from '@neural-ui/core/option-api';

import type { NeuSelectionValue } from '@neural-ui/core/option-api';

// Declaración pública (solo referencia)
export type NeuSelectionValue<V, M extends NeuSelectionMode> = M extends 'multiple' ? readonly V[] : V | null;

NeuToggleOptionTypeScript

import type { NeuIconKey } from '@neural-ui/core/foundation';

import type { NeuToggleOption } from '@neural-ui/core/toggle-button-group';

// Declaración pública (solo referencia)
export interface NeuToggleOption<T = unknown> {
  disabled?: boolean;
  icon?: NeuIconKey;
  label: string;
  value: T;
}

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

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`	Bordes normales de controles y celdas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.08)`
`--neu-primary`	Color de marca en controles activos y énfasis	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-primary-dark`	Tono oscuro de marca; texto de Button outline y ghost en el tema claro	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#005fcc`
`--neu-primary-fg`	Contenido dibujado sobre el fondo primario	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`
`--neu-primary-solid`	Fondo de las acciones de marca sólidas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#006ee6`
`--neu-primary-solid-fg`	Contenido de las acciones de marca sólidas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`
`--neu-primary-solid-hover`	Fondo de las acciones sólidas al pasar el puntero	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#005fcc`
`--neu-radius`	Radio de las esquinas del control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`8px`

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.