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>

Icons

Preview

Password

Must have more than 6 characters

Code

<div class="field is-invalid">
  <label class="label">Password</label>
  <div class="control">
    <input class="input" type="password" placeholder="Password" />
    <button class="btn input__icon">
      <iconify-icon class="icon" icon="solar:eye-outline"></iconify-icon>
    </button>
  </div>
  <span class="help">Must have more than 6 characters</span>
</div>