InputGroup

Combina un campo con acciones relacionadas o complementos de la aplicación.

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

import { NeuInputGroupComponent } from '@neural-ui/core/form-field';

Uso

Proyecta controles y acciones en el orden necesario. attached une los controles contiguos; false los separa y permite el salto de línea. size selecciona la escala del grupo. Aplica el mismo size a los hijos que lo admitan. El grupo no crea etiquetas, validación ni enlaces de valor.

Ejemplos

Prueba el comportamiento y abre Código para consultar la implementación.

Pedido

Búsquedas: 0 · —

Prueba y configura

Cambia las opciones y prueba el resultado. El template generado sigue tu configuración; Código contiene la implementación ejecutable completa.

Pedido

Búsquedas: 0

Controles unidos

<neu-input-group
  size="md"
  [attached]="true"
>
  <neu-input
    size="md"
    label="Pedido"
    [floatingLabel]="true"
    [value]="value()"
    (valueChange)="value.set($event)"
  />
  <button
    neu-button
    size="md"
    (neuClick)="searches.update(increment)"
  >
    Buscar
  </button>
</neu-input-group>

Datos y contenido

InputGroup solo tiene Inputs de distribución y proyección por defecto, sin Outputs. Los valores, acciones y validación pertenecen a los hijos y la aplicación.

Accesibilidad y teclado

Cada control proyectado necesita una etiqueta visible o accesible. Los botones conservan su orden de foco y activación nativos. Los complementos decorativos no sustituyen la etiqueta. Mantén las relaciones de error y ayuda en el campo o en un FormField envolvente.

Tecla	Acción
`Tab`	Sigue el orden normal de foco de enlaces, campos y acciones del contenido; el contenedor no añade un modelo de foco móvil.
`Enter`	Activa un botón nativo enfocado o sigue un enlace enfocado dentro del contenido.
`Space`	Activa un botón nativo enfocado dentro del contenido; los campos mantienen la edición normal de texto.

API

Inputs y Outputs corresponden al paquete fijado. Los tipos con nombre enlazan a sus definiciones; cada Template disponible tiene un ejemplo ejecutable.

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
`attached`	`boolean`	`true`	`[attached]`	Une los controles; false añade separación y salto de línea.
`size`	`NeuFormFieldSize`	`'md'`	`[size]`	Escala del grupo: sm, md o lg.

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
`*` Controles y complementos Ver ejemplo	Proyección de contenido Proyecta controles etiquetados, complementos de la aplicación y acciones relacionadas.	`<ng-content />` Contexto utilizado: `—`

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

Controles y complementos

*

Importe

Public Types

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

NeuFormFieldSizeTypeScript

Estilos y tokens

Utiliza tokens públicos de espaciado, superficie, texto y foco. Comprueba el contenido proyectado y los controles en ambos temas y con anchos reducidos.

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