← Back to all components

Input

Text input with label, helper text, error state, and prefix/suffix addons.

We'll never share your email.
Must be at least 8 characters.
₹
<div class="field">
  <label class="field-label">Email</label>
  <input type="email" class="input" placeholder="[email protected]">
  <span class="field-helper">We'll never share your email.</span>
</div>

<!-- Error state -->
<div class="field field-error">
  <label class="field-label">Password</label>
  <input type="password" class="input" value="123">
  <span class="field-helper">Must be at least 8 characters.</span>
</div>

<!-- With prefix -->
<div class="field">
  <label class="field-label">Amount</label>
  <div class="input-group">
    <span class="input-group-text">₹</span>
    <input type="text" class="input" placeholder="0.00">
  </div>
</div>