Input

An input component that represents a text field. It is used to capture data written by the user, such as names, email addresses, passwords, or other textual information.

Basic Usage

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

Disabled

Preview

Code

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

Field

Use the Field component to compose an input with a label, help text, and error message.

tip

For more information, visit the field documentation.

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>

Colors

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>