Wake Creators LogoCSS - Components Squid Style
Getting Started
Content
Layout
Forms
InputBasic ExampleLabeledErrorValidReadonlyDisabledRangeSelectSelectorsTextarea
Components
Utilities
Styleguide

Input

The text input and its variations.

Basically it's a HTML input element with input class. So all attributes it's comming for a regular HTML element.

Basic Example

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

Labeled

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

R$
<div class='col-sm-24 col-md-12 col-lg-8'>
    <label class='display-block' for='input-text-icon-4'>
      Label
    </label>
    <div class='wrapper-input mb-3'>
      <span
        class='input-group-text'
      >
        R$
      </span>
      <input
        class='display-block input'
        type='number'
        name='input-text-icon-4'
        id='input-text-icon-4'
        placeholder='XX'
      />
      <button
        class='button button-pink input-group-text'
      >
        <i class="fas fa-check"></i>
      </button>
    </div>
  </div>

Error

An input 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'>
      <input
        class='display-block input error'
        type='text'
        name='input-text-error'
        id='input-text-error'
        placeholder='Placeholder'
        required
      />
    </div>
    <div class='box-validation box-invalid show mb-3'>
      <i class="fas fa-exclamation-triangle"></i>Error
    </div>
  </div>

Valid

An input 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'>
      <input
        class='display-block input valid'
        type='text'
        name='input-text-valid'
        id='input-text-valid'
        placeholder='Placeholder'
      />
    </div>
    <div class='box-validation box-valid show mb-3'>
      <i class="fas fa-check-circle"></i>Valid
    </div>
  </div>

Readonly

An input field can show that it is readonly. Add readonly attribute/class on input.

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

Disabled

An input field can show that it is disabled. Add disabled attribute/class on input.

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