Textarea

Default
.e-input.e-input-textarea 

<div class="e-field">
  <label for="textarea1" class="e-field__label">
    Form input label
    <span class="e-field__label__info">
      <b>
        150
      </b>
       character left
    </span>
  </label>
  <textarea id="textarea1" class="e-input e-input-textarea"></textarea>
</div>


                        <div class="e-field">
                          <label for="textarea1" class="e-field__label">Form input label<span class="e-field__label__info"><b>150</b> character left</span></label>
                          <textarea id="textarea1" class="e-input e-input-textarea"></textarea>
                        </div>

Variations

Error
.e-input-error 

<div class="e-field">
  <label for="textarea3" class="e-field__label">
    Form input label
  </label>
  <textarea id="textarea3" class="e-input e-input-textarea e-input-error"></textarea>
</div>


                          <div class="e-field">
                            <label for="textarea3" class="e-field__label">Form input label</label>
                            <textarea id="textarea3" class="e-input e-input-textarea e-input-error"></textarea>
                          </div>

Disabled
:disabled, .e-input-disabled 

<div class="e-field">
  <label for="textarea2" class="e-field__label">
    Form input label
  </label>
  <textarea id="textarea2" disabled class="e-input e-input-textarea"></textarea>
</div>


                          <div class="e-field">
                            <label for="textarea2" class="e-field__label">Form input label</label>
                            <textarea id="textarea2" disabled class="e-input e-input-textarea"></textarea>
                          </div>

Code
.e-input-code 

<div class="e-field">
  <label for="textarea4" class="e-field__label">
    Form input label
  </label>
  <textarea id="textarea4" class="e-input e-input-textarea e-input-code"></textarea>
</div>


                          <div class="e-field">
                            <label for="textarea4" class="e-field__label">Form input label</label>
                            <textarea id="textarea4" class="e-input e-input-textarea e-input-code"></textarea>
                          </div>

Code
.e-input-auto_height and rows="10" 

<div class="e-field">
  <label for="textarea5" class="e-field__label">
    auto height input
  </label>
  <textarea id="textarea5" rows="10" class="e-input e-input-textarea e-input-auto_height"></textarea>
</div>


                          <div class="e-field">
                            <label for="textarea5" class="e-field__label">auto height input</label>
                            <textarea id="textarea5" rows="10" class="e-input e-input-textarea e-input-auto_height"></textarea>
                          </div>

Related components

Input

Last update

Message feat(input): auto height textarea
Date:
()
Committer: rudywaltz
Component history