Saltar al contenido principal
Gob.cl

Text area

Revisa y prueba el componente en código

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

Ver en Storybook

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

Básico

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

Con valor

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

Estados

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