Componente de Etiquetas Empresariales con ShadCN UI y React

Gestionar etiquetas skills, categorías, labels y más es un requisito común en aplicaciones web modernas, pero muchos componentes existentes son demasiado simples o carecen de la flexibilidad que los proyectos enterprise necesitan. Por eso construimos un Tags Input totalmente personalizable y accesible basado en ShadCN UI, pensado para producción y con TypeScript desde el primer día.

El componente ShadCN UI Tags Input está construido sobre React 18+, TypeScript, React Hook Form, Framer Motion para animaciones fluidas y el ecosistema ShadCN UI con TailwindCSS. Es accesible compatible con ARIA, extensible y listo para integrarse en formularios complejos.

¿Por qué otro Tags Input? Porque queríamos validación de nivel enterprise con React Hook Form, soporte de teclado sin fricciones con Enter y Backspace, animaciones suaves con Framer Motion, compatibilidad total con ShadCN UI desde el primer momento y accesibilidad real para lectores de pantalla.

Instalación en tres pasos

1. Instala dependencias peer: npm install lucide-react class-variance-authority clsx tailwind-merge cmdk framer-motion react-hook-form

2. Añade los componentes base de ShadCN: npx shadcn@latest add form input badge

3. Copia el componente a tu proyecto: cp components/tags-input-field.tsx your-project/src/components/

Uso básico

Registra el campo en React Hook Form y renderiza el componente TagsInputField dentro de tu FormProvider. Define el nombre del campo por ejemplo skills, una etiqueta legible por ejemplo Skills y un placeholder como Escribe tus habilidades. Al enviar el formulario recibirás un array de etiquetas validado, con soporte ARIA y navegación por teclado para añadir y eliminar etiquetas de forma instantánea.

Principales características

Variantes y temas para tamaños, colores y disposición. Validación integrada con mensajes de error vía React Hook Form. Soporte de teclado para añadir y borrar con Enter y Backspace. Integración nativa con los componentes de formulario, input y badge de ShadCN. Opciones de personalización como máximo de etiquetas, evitar duplicados y sugerencias. Accesibilidad compatible con ARIA para asistentes y lectores de pantalla.

Documentación completa y demos Consulta la documentación y ejemplos en vivo

Conclusión

Si ya usas ShadCN UI en tu app React y necesitas un Tags Input listo para producción, este componente te ahorrará mucho boilerplate y te dará un control fino sobre validación, accesibilidad y estilo. Además, en Q2BSTUDIO, empresa de desarrollo de software, creamos aplicaciones a medida y software a medida con foco en rendimiento, escalabilidad y seguridad. Podemos integrar este patrón en tu diseño de sistema, optimizar la experiencia de formularios y conectarlo con tus flujos de negocio.

Somos especialistas en inteligencia artificial e IA para empresas, ciberseguridad y pentesting, servicios cloud AWS y Azure, servicios de inteligencia de negocio con Power BI, agentes IA y automatización. Si buscas impulsar tu producto con componentes y arquitectura sólida, descubre cómo abordamos el desarrollo multiplataforma y las integraciones enterprise en nuestro servicio de aplicaciones a medida y software a medida.

Feedback y roadmap

Nos encantará recibir comentarios y contribuciones en GitHub Repositorio del Tags Input para ShadCN UI. Próximos pasos previstos: sugerencias con autocompletado y reordenación por arrastrar y soltar. ¿Te sería útil en tu caso de uso?