Textfield

Usa este playground base para configurar el Text Field en contexto: ajusta color, outlined, clearable, counter/limit, readonly, disabled y retain-color desde un solo panel de control.

Compara prependIcon y appendIcon con prependInnerIcon y appendInnerIcon en campos filled y outlined para elegir el peso visual correcto en contexto, acciones y escaneo.

Compara campos filled y outlined en estados interactivo, readonly y disabled, y evalúa el comportamiento de retain-color y floating-label para definir jerarquía y legibilidad en formularios reales.

Compone inputs orientados a tareas con prepend, prepend-inner, append-inner y append para incluir contexto, acciones rápidas y controles secundarios sin perder claridad.

Usa prefix y suffix para fijar tokens como símbolos monetarios, IDs y unidades; así los usuarios entienden el formato esperado de inmediato y cometen menos errores de entrada.

Construye flujos de validación de extremo a extremo con reglas, visibilidad de errores y control del estado de envío. Este ejemplo usa un card de registro completo para mostrar cómo reglas de campo y disponibilidad de acciones trabajan juntas en formularios de producción.

Usa la tabla de API como fuente de verdad para props, tipos permitidos, valores por defecto y notas de comportamiento al implementar variantes de Text Field en producción.