Textarea

Textareas is an input element used when users have to enter an amount of text that’s longer than a single line.

Usage

<div class="c-textarea">
  <textarea rows="4" class="c-textarea__input" placeholder="Placeholder"></textarea>
</div>

Implementation

Type	Name
Elements
Wrapper	`.c-textarea`
Textarea	`.c-textarea__input`
Modifiers	None
States
Success	`.c-textarea--success`
Error	`.c-textarea--Error`

States

Success

Label

<div className="c-form mb-0">
  <label className="c-form__label" for="">Label</label>
  <div className="c-form__element">
    <div className="c-textarea c-textarea--success">
      <FontAwesomeIcon icon={faCheckCircle} className="c-textarea__icon-right text-green" />
      <textarea rows="4" className="c-textarea__input" placeholder="Placeholder" ></textarea>
    </div>
  </div>
</div>

Error

Label

Error message

<div className="c-form mb-0">
  <label className="c-form__label" for="">Label</label>
  <div className="c-form__element">
    <div className="c-textarea c-textarea--error">
      <FontAwesomeIcon icon={faExclamationTriangle} className="c-textarea__icon-right text-red" />
      <textarea rows="4" className="c-textarea__input" placeholder="Placeholder" ></textarea>
    </div>
  </div>
  <p class="c-form__error">Error message</p>
</div>