Wake Creators LogoCSS - Components Squid Style
Getting Started
Content
Layout
Forms
InputRangeSelectSelectorsTextareaBasic ExampleLabeledErrorValidReadonlyDisabled
Components
Utilities
Styleguide

Textarea

Textarea and its variations.

Same as input component, basically it's a HTML textarea element with textarea class. So all attributes it's comming for a regular HTML element.

Basic Example

<div class='col-24'>
    <label class='display-block' for='textarea-text'>
      Label
    </label>
    <div class='wrapper-input mb-3'>
      <textarea
        class='display-block textarea'
        type='text'
        name='textarea-text'
        id='textarea-text'
        placeholder='Placeholder'
      ></textarea>
    </div>
  </div>

Labeled

Place a label or button in any side of a textarea. You may also place on both sides. Inside wrapper-input just add a label or button with input-group-text.

@$
<div class='col-24'>
    <label class='display-block' for='textarea-text-icon-3'>
      Label
    </label>
    <div class='wrapper-input mb-3'>
      <span
        class='input-group-text'
      >
        @
      </span>
      <textarea
        class='display-block textarea'
        type='number'
        name='textarea-text-icon-3'
        id='textarea-text-icon-3'
        placeholder='Placeholder'
      ></textarea>
      <span
        class='input-group-text'
      >
        $
      </span>
    </div>
  </div>

Error

Textarea field can show the data contains errors. Add error class on input and a element with box-validation box-invalid below wrapper-input in case of error message is need it.

Error
<div class='col-24'>
    <label class='display-block' for='input-text-error'>
      Label
    </label>
    <div class='wrapper-input'>
      <textarea
        class='display-block textarea error'
        type='number'
        name='textarea-text-icon-3'
        id='textarea-text-icon-3'
        placeholder='Placeholder'
      ></textarea>
    </div>
    <div class='box-validation box-invalid show mb-3'>
      <i class="fas fa-exclamation-triangle"></i>Error
    </div>
  </div>

Valid

Textarea field can show that it is valid. Add valid class on input and a element with box-validation box-valid below wrapper-input in case of a valid message is need it.

Valid
<div class='col-24'>
    <label class='display-block' for='input-text-valid'>
      Label
    </label>
    <div class='wrapper-input'>
      <textarea
        class='display-block textarea valid'
        type='number'
        name='textarea-text-icon-3'
        id='textarea-text-icon-3'
        placeholder='Placeholder'
      ></textarea>
    </div>
    <div class='box-validation box-valid show mb-3'>
      <i class="fas fa-check-circle"></i>Valid
    </div>
  </div>

Readonly

Textarea field can show that it is readonly. Add readonly attribute/class on textarea.

<div class='col-24'>
    <label class='display-block' for='textarea-text-readonly'>
      Label
    </label>
    <div class='wrapper-input mb-3'>
      <textarea
        class='display-block textarea'
        type='text'
        name='textarea-text-readonly'
        id='textarea-text-readonly'
        value='Readonly field'
        placeholder='Placeholder'
        readonly
      ></textarea>
    </div>
  </div>

Disabled

Textarea field can show that it is disabled. Add disabled attribute/class on textarea.

<div class='col-24'>
    <label class='display-block' for='input-text'>
      Label
    </label>
    <div class='wrapper-input'>
      <textarea
        class='display-block textarea'
        type='number'
        name='textarea-text-icon-3'
        id='textarea-text-icon-3'
        placeholder='Placeholder'
        disabled
      ></textarea>
    </div>
  </div>