Text field

Revisa y prueba el componente en código

Observa los componentes y sus propiedades para adaptarlos a tus necesidades específicas.

Campos de texto de una línea. Usa el bloque BEM .cl-field del Kit Digital.

Básico

<div class="cl-field">
  <div class="cl-field__question">
    <label class="cl-field__label" for="cl-text-field-1">Label</label>
    <p class="cl-field__description">Descripción de la pregunta (opcional)</p>
  </div>
  <div class="cl-field__control">
    <input class="cl-field__input" id="cl-text-field-1" type="text" placeholder="Respuesta escrita" />
    <span class="cl-field__icon cl-icon" data-icon="search" aria-hidden="true"></span>
  </div>
  <p class="cl-field__hint">Ayuda para el usuario</p>
</div>

Con valor

<div class="cl-field">
  <div class="cl-field__question">
    <label class="cl-field__label" for="cl-text-field-2">Label</label>
    <p class="cl-field__description">Descripción de la pregunta (opcional)</p>
  </div>
  <div class="cl-field__control">
    <input class="cl-field__input" id="cl-text-field-2" type="text" value="Respuesta escrita" />
    <span class="cl-field__icon cl-icon" data-icon="search" aria-hidden="true"></span>
  </div>
  <p class="cl-field__hint">Ayuda para el usuario</p>
</div>

Sin ícono

<div class="cl-field">
  <div class="cl-field__question">
    <label class="cl-field__label" for="cl-text-field-3">Label</label>
    <p class="cl-field__description">Descripción de la pregunta (opcional)</p>
  </div>
  <div class="cl-field__control">
    <input class="cl-field__input" id="cl-text-field-3" type="text" placeholder="Respuesta escrita" />
  </div>
  <p class="cl-field__hint">Ayuda para el usuario</p>
</div>

Estados

<div class="cl-field cl-field--error">
  <div class="cl-field__question">
    <label class="cl-field__label" for="cl-text-field-4">Label</label>
    <p class="cl-field__description">Descripción de la pregunta (opcional)</p>
  </div>
  <div class="cl-field__control">
    <input class="cl-field__input" id="cl-text-field-4" type="text" placeholder="Respuesta escrita" />
    <span class="cl-field__icon cl-icon" data-icon="search" aria-hidden="true"></span>
  </div>
  <p class="cl-field__hint">Ayuda para el usuario</p>
</div>

<div class="cl-field cl-field--disabled">
  <div class="cl-field__question">
    <label class="cl-field__label" for="cl-text-field-5">Label</label>
    <p class="cl-field__description">Descripción de la pregunta (opcional)</p>
  </div>
  <div class="cl-field__control">
    <input class="cl-field__input" id="cl-text-field-5" type="text" placeholder="Respuesta escrita" disabled />
    <span class="cl-field__icon cl-icon" data-icon="search" aria-hidden="true"></span>
  </div>
  <p class="cl-field__hint">Ayuda para el usuario</p>
</div>