Skip to main content

Field

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

Structure​

  • .field: Container element
    • .label: Label tag for the form input
    • <input>, <textarea>, <select>: Form element
    • .help: Help text

Basic Usage​

Input​

Debe tener mas de 6 caracteres
<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>

Textarea​

Debe tener menos de 200 caracteres
<div class="field">
  <label class="label">Descripción</label>
  <textarea
    class="textarea"
    placeholder="Ingresa una pequeña descripción"
  ></textarea>

  <!--  Opcional  -->
  <span class="help">Debe tener menos de 200 caracteres</span>
</div>

Select​

Debe seleccionar por lo menos un personaje
<div class="field">
  <label class="label">Seleccione un personaje</label>
  <select class="select">
    <option value="1">Mario Bross</option>
    <option value="2">Luigi Bross</option>
    <option value="3">Koopa Troopa</option>
    <option value="4">Donkey Kong</option>
  </select>
  <span class="help">Debe seleccionar por lo menos un personaje</span>
</div>

Colors​

To add color to the field, you can use the following classes:

ClassColorVariable
is-valid
Green
--pui-color-success
is-invalid
Red
--pui-color-error
info

For more information on color values, visit the color customization documentation.

is-valid​

Use the is-valid class along with the field class.

Debe tener mas de 6 caracteres

is-invalid​

Use the is-invalid class along with the field class.

Debe tener mas de 6 caracteres