1. Básicos y Formas

1. Estándar (Borde simple)

2. Fondo Relleno (Filled)

3. Estilo Píldora (Rounded Full)

4. Solo Borde Inferior

5. Con Sombra (Shadow)

6. Fantasma (Hover para ver borde)

7. Borde Grueso (Brutalismo)

8. Transparente (Contrast)

2. Estados y Validación

9. Estado Enfocado (Active)

10. Deshabilitado (Disabled)

11. Solo Lectura (Read Only)

12. Error con Mensaje

Formato de correo incorrecto.

13. Éxito (Success)

¡Nombre de usuario válido!

14. Advertencia

La contraseña es débil.

15. Validación Nativa (Solo números) Escribe números para ver el verde.

3. Con Iconos y Prefijos

16. Icono Izquierda

17. Icono Derecha

18. Iconos a ambos lados

19. Prefijo Visual (Moneda)

$ USD

20. Sufijo Visual (URL)

https:// .com

21. Action Button (Newsletter)

Suscribir

4. Floating Labels (Material)

Nombre Completo

Dirección de envío

Compañía

25. Con Helper Text

Usaremos este dato para tu factura.

5. Textareas (Multilínea)

26. Simple (Resizable)

27. Tamaño Fijo (No Resize)

28. Con Contador de Caracteres

0/100

29. Líneas (Notas)

6. Interactivos y Especiales

30. Password Toggle

31. Buscador Redondo

32. Archivo (Estilizado) Subir archivo

33. Color Picker

34. Fecha (Date)

35. Hora (Time)

7. Estilos Creativos

36. Neumorfismo (Soft UI)

37. Neumorfismo Inset

38. Glassmorphism

39. Borde Gradiente

40. Código (Monospaced)

8. Tamaños y Extras

41. Tamaño Small (xs/sm)

42. Tamaño Large (lg)

43. Copiar al Portapapeles

¡Copiado!

44. Range con Valor

50%

45. OTP / Pin Code

46. Radio/Input Card

Seleccionar Opción A

47. Autocomplete Nativo

48. Tags Input View

React HTML

49. Input + Select

US CA EU

50. Expandible al Foco