Campos de entrada

Addon Input Group

Addon Input Group: Un campo de texto envuelto en un caparazón con borde que puede contener un ícono inicial, un botón final o texto, y comparte un anillo de enfoque en todo el grupo.

https://9/64

Cómo usar Addon Input Group

Usa este grupo cuando un campo de texto y su acción forman una unidad, como en la búsqueda de un catálogo.

Addon Input Group se presenta con el formato de vista previa «en línea» y el tema «claro/oscuro».

Coloca el icono de búsqueda antes del campo y conecta el botón final a tu función de búsqueda. El anillo de foco compartido mantiene la unidad visual al escribir.

El componente aporta el campo y su presentación. Tu aplicación debe proporcionar una etiqueta accesible, ejecutar la búsqueda y validar el valor enviado.

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

Control	Tipo	Valor inicial	Límites de la vista previa
`placeholder`	`text`	`Search components...`	Hasta 40 caracteres
`trailingLabel`	`text`	`Search`	Hasta 16 caracteres
`accentColor`	`color`	`#38BDF8`	Los metadatos no indican otro límite.
`showLeadingIcon`	`boolean`	`true`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Addon Input Group?

Addon Input Group está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Addon Input Group?

Los metadatos de React indican estas dependencias npm además de React: clsx.

¿Qué detalles de accesibilidad se observan en Addon Input Group?

El código React de Addon Input Group incluye: elementos nativos (button, input); atributos y manejadores (aria-hidden, aria-invalid). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Addon Input Group el movimiento reducido?

El análisis no encontró una consulta directa con useReducedMotion() o matchMedia en el archivo index.tsx de Addon Input Group. Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Auto Grow Textarea de Fieldbook, de la categoría Campos de entrada.

2792Auto Grow TextareaCampos de entradaUn campo de texto de varias líneas que crece a medida que la persona escribe más, en lugar de desplazarse dentro de un cuadro fijo.

Imagen fija del componente Focus ring text input de Fieldbook, de la categoría Campos de entrada.

2356Focus ring text inputCampos de entradaUn campo de texto de una sola línea con un marcador de posición silenciado y un anillo de acento sólido que aparece solo cuando está enfocado.

Imagen fija del componente Select All Checklist de Fieldbook, de la categoría Campos de entrada.

1982Select All ChecklistCampos de entradaUna casilla de verificación principal que muestra un guión cuando solo algunos de sus elementos secundarios están marcados y una marca de verificación una vez que todos los elementos lo están.

Imagen fija del componente Input with affix de Fieldbook, de la categoría Campos de entrada.

2769Input with affixCampos de entradaUn campo de texto fusionado con un ícono inicial o una etiqueta corta, como un esquema de URL, que comparte un caparazón con borde que se enfoca como un control único.

Imagen fija del componente Orbit drop zone de Fieldbook, de la categoría Campos de entrada.

2774Orbit drop zoneCampos de entradaValida un archivo, simula el progreso de carga y conserva un resultado que puede quitarse.

Imagen fija del componente Single value slider de Fieldbook, de la categoría Campos de entrada.

2791Single value sliderCampos de entradaUn control deslizante horizontal con un pulgar que se puede arrastrar y que llena la pista detrás de él para que el valor actual se lea de un vistazo.