Input

Componente de entrada que representa un campo de texto. Se utiliza para capturar datos escritos por el usuario, como nombres, correos electrónicos, contraseñas u otra información textual.

Uso básico

<input class="input" type="text" placeholder="Ingrese su correo" />

Disabled

Preview

Code

<input class="input" type="text" placeholder="Ingrese su correo" disabled="" />

Field

Usa el componente Field para componer un input con una etiqueta, texto de ayuda y mensaje de error

tip

Para más información visita la documentación de field

Preview

Numero de documentoDebe tener mas de 6 caracteres

Code

<div class="field">
  <label class="label">Numero de documento</label>
  <input
    class="input"
    type="text"
    placeholder="Ingresa tu número de documento"
  />
  <span class="help">Debe tener mas de 6 caracteres</span>
</div>

Colores

is-valid

Preview

Numero de documentoDebe tener mas de 6 caracteres

Code

<div class="field is-valid">
  <label class="label">Numero de documento</label>
  <input
    class="input"
    type="text"
    placeholder="Ingresa tu número de documento"
  />
  <span class="help">Debe tener mas de 6 caracteres</span>
</div>

is-invalid

Preview

Numero de documentoDebe tener mas de 6 caracteres

Code

<div class="field is-invalid">
  <label class="label">Numero de documento</label>
  <input
    class="input"
    type="text"
    placeholder="Ingresa tu número de documento"
  />
  <span class="help">Debe tener mas de 6 caracteres</span>
</div>