Field

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

Estructura

• .field: Elemento contenedor
  • .label: Etiqueta label para la entrada de formulario
  • <input>, <textarea>, <select>: Elemento de formulario
  • .help: Texto de ayuda

Uso básico

Input

Numero de documentoDebe 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

Descripción 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

Seleccione un personajeMario BrossLuigi BrossKoopa TroopaDonkey KongDebe 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>

Colores

Para agregar color al field puedes usar las clases

Clase	Color	Variable
is-valid	Verde	--pui-color-success
is-invalid	Rojo	--pui-color-error

info

Para más información de los valores de los colores visitar la documentación de personalización de colores

is-valid

Usa la clase is-valid en conjunto con la clase field

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

Usa la clase is-invalid en conjunto con la clase field

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>