Aithu · prototipo

Ficha

Categoría: Forms
Nivel: molécula
Estado: en revisión
Radix: no
Actualizado: 2026-10-26
Figma: 468:16025
Fuente: design-system/componentes/TextField.md

Cuándo usarlo

Cualquier campo de formulario con etiqueta visible.
Show suffix para un dominio fijo (@bancoagricola.com); Show action para una acción de texto en línea («Mostrar» en contraseñas).

Cuándo NO usarlo

Texto libre al coach → Field.
Códigos de 6 dígitos → OtpInput.

Anatomía

Columna gap 4: etiqueta body/sm-strong · caja 48 radius-3x (padding 0/4/0/16, borde 06-muted): input body/md + sufijo body/md 07-mid + acción (Button tertiary sm) · ayuda body/xs.

Props

Prop	Figma	Valores	Por defecto
`label`	Label	texto	Etiqueta
`value`	Value	texto	Placeholder
`help`	Help	texto	Texto de ayuda
`showHelp`	Show help	boolean	true
`suffix`	Suffix	texto	@bancoagricola.com
`showSuffix`	Show suffix	boolean	false
`showAction`	Show action	boolean	false
`disabled`	State	default · focus · disabled	default
`error`	Validation	none · error	none
`placeholder`, `type`, `name`, `autoComplete`, `id`, …	—	atributos nativos de `<input>`	—
`onChange`	—	(valor) => void	—

Estados

default · focus (:focus-within, 2 px borders/brand/focus + anillo 4 px al 20 %) · populated (hay valor) · error (Validation=error: borde borders/danger/06-muted, ayuda text/danger/08-strong) · disabled (atributo disabled: surface/disabled/04-tint).

Accesibilidad

<label for> ligado al input; ayuda/error por aria-describedby; error → aria-invalid; foco = 2 px borders/brand/focus + anillo; deshabilitado con el atributo disabled. Borde borders/neutral/06-muted (3:1 contra la superficie).

Contenido

La etiqueta es un sustantivo («Correo»), el placeholder un ejemplo («tu.nombre@banco.com»), el error dice qué hacer («Revisa el correo: le falta la @»).

Errores conocidos

Ninguno medido.

Changelog

2026-10-26 · nace (T-02).

TextField

default · sufijo · acción · error · deshabilitado