Inputs

Input components utilizing the @utility input-base, @utility input-group, @utility input-icon, and @utility input-label classes.

Text Input

Default With Leading Icon

With Trailing Icon

With Both Icons

With Helper Text Only lowercase letters and numbers are allowed. Error State

Please enter a valid email address. Disabled

Usage

inputs.html

<!-- Basic Input -->
<label class="block">
  <span class="input-label">Label</span>
  <input type="text" class="input-base" placeholder="..." />
</label>

<!-- With Leading Icon -->
<label class="block">
  <span class="input-label">Search</span>
  <div class="input-group">
    <div class="input-icon">
      <!-- Icon Component here -->
    </div>
    <input type="text" class="input-base" placeholder="Search..." />
  </div>
</label>

<!-- With Trailing Icon -->
<label class="block">
  <span class="input-label">Email</span>
  <div class="input-group">
    <input type="email" class="input-base" placeholder="Email address" />
    <div class="input-icon">
      <!-- Icon Component here -->
    </div>
  </div>
</label>

<!-- Error State -->
<input type="text" class="input-base input-error" />

<!-- Disabled State -->
<input type="text" class="input-base input-disabled" disabled />