Campos

Aprobado2026-10-02 · Aprobado por el founder en la revisión visual.

Formularios.

Vista · datos de ejemplo

Anatomía

Etiqueta de sistema arriba
Control blanco con borde de 1 px, 44 px
Ayuda o error abajo (el error en naranja)

Sí

Valida en el momento (RUT, correo)
Variante de línea para el asistente

No pongas la etiqueta dentro del campo como único texto

HTML exacto

<form style="display:grid;gap:16px;max-width:480px">
  <label class="nu-campo">
    <span class="nu-campo__etiqueta">Razón social</span>
    <input class="nu-campo__control" value="Juanito Servicios SpA">
  </label>
  <label class="nu-campo" data-error="true">
    <span class="nu-campo__etiqueta">RUT</span>
    <input class="nu-campo__control" value="26.111.457-9">
    <span class="nu-campo__ayuda">El dígito verificador no corresponde.</span>
  </label>
  <label class="nu-campo">
    <span class="nu-campo__etiqueta">Comuna</span>
    <select class="nu-campo__control"><option>Talca</option><option>Curicó</option></select>
  </label>
  <label class="nu-campo">
    <span class="nu-campo__etiqueta">Nota</span>
    <textarea class="nu-campo__control" placeholder="Algo que Kōdo deba saber de este cliente"></textarea>
    <span class="nu-campo__ayuda">Opcional.</span>
  </label>
</form>

Clases: .nu-campo .nu-campo__etiqueta .nu-campo__control .nu-campo__ayuda .nu-campo--linea · Fragmento: snippets/fields.html