Campos de texto.
Usar controles nativos de texto con label persistente, ayuda antes del error y tamaño acorde al dato.
Cuándo usar
Usar controles nativos de texto con label persistente, ayuda antes del error y tamaño acorde al dato.
- Elegir el elemento HTML nativo antes de agregar una primitiva interactiva.
- Mantener el nombre, el resultado y la acción visibles sin depender de un icono.
- Documentar cualquier excepción en el producto consumidor.
Ejemplo visible
Usaremos este correo para enviar el recibo.Ingresa el RUT completo.
Anatomía
| Parte | Contrato |
|---|---|
| 1 | Label |
| 2 | Control |
| 3 | Ayuda opcional |
| 4 | Estado y mensaje |
| 5 | Contador o acción opcional |
Estados y variantes
| Estado | Comportamiento esperado |
|---|---|
| empty | Placeholder sólo como ejemplo |
| filled | Valor legible |
| focus | Outline visible |
| invalid | aria-invalid y mensaje asociado |
| disabled | No editable; evitar si sólo es read-only |
| read-only | Copiable y claramente no editable |
Accesibilidad
- Label asociado con for e id.
- Autocomplete, inputmode y type correctos.
- No impedir pegar en password.
- Error no desaparece antes de corregir o reenviar.
HTML de referencia
<div class="cis-field">
<label for="correo">Correo electrónico</label>
<input id="correo" name="email" type="email" autocomplete="email" aria-describedby="correo-ayuda">
<p id="correo-ayuda">Usaremos este correo para enviarte el recibo.</p>
</div>Definition of Done
- Ejemplo visible y código copiable coinciden.
- Teclado, foco, nombre accesible y estado fueron probados.
- El componente funciona sin JavaScript o declara una mejora progresiva acotada.
- Los mensajes cumplen core/prosa en modo estricto.
- La promoción registra versión, compatibilidad y prueba de regresión.