Forms

Input Group

Wrap inputs and addons in .quanta-input-group for a single bordered control.

<div class="quanta-input-group">
  <input type="text" class="quanta-input" placeholder="Enter text">
</div>

With Icon/Add-on

Use .quanta-input-icon-left to prepend text or icons.

<div class="quanta-input-group">
  <span class="quanta-input-icon-left">$</span>
  <input type="number" class="quanta-input" placeholder="0.00">
</div>

$

With Button

Combine an <input> and a button using .quanta-input-button.

<div class="quanta-input-group">
  <input type="text" class="quanta-input" placeholder="Search…">
  <button class="quanta-input-button">Go</button>
</div>

Disabled State

Apply disabled to the <input> or <button>.

<div class="quanta-input-group">
  <span class="quanta-input-icon-left">🔒</span>
  <input type="password" class="quanta-input" placeholder="Locked" disabled>
  <button class="quanta-input-button" disabled>Send</button>
</div>

🔒