Forms
Basic Form
Wrap each label + control in a .quanta-form-group. Use .quanta-form-label and
.quanta-form-input / .quanta-form-textarea to get consistent spacing, fonts and focus states.
<form class="quanta-form">
<div class="quanta-form-group">
<label class="quanta-form-label">Email address</label>
<input type="email" class="quanta-form-input" placeholder="you@example.com">
</div>
<div class="quanta-form-group">
<label class="quanta-form-label">Message</label>
<textarea class="quanta-form-textarea"></textarea>
</div>
</form>Grid Layout
Add .quanta-form-grid to auto‑flow your groups into a responsive grid.
<form class="quanta-form quanta-form-grid">
<div class="quanta-form-group">
<label>First Name</label>
<input class="quanta-form-input">
</div>
<div class="quanta-form-group">
<label>Last Name</label>
<input class="quanta-form-input">
</div>
</form>Inline Form
Use .quanta-form-inline to place form‑groups in a single row, wrapping as needed.
<form class="quanta-form quanta-form-inline">
<div class="quanta-form-group">
<label>Username</label>
<input class="quanta-form-input">
</div>
<div class="quanta-form-group">
<label>Password</label>
<input type="password" class="quanta-form-input">
</div>
</form>Validation States
Add .error or .success to any .quanta-form-group to reflect state.
<div class="quanta-form-group error">…</div>
<div class="quanta-form-group success">…</div>Search Field
Wrap inputs in .quanta-form-search for a built‑in search icon prefix.
<div class="quanta-form-search">
<input type="text" class="quanta-form-input" placeholder="Search…" />
</div>Checkbox & Radio
Use .quanta-custom-checkbox / .quanta-custom-radio to style your toggles.
<label class="quanta-custom-checkbox quanta-custom-checkbox-primary">
<input type="checkbox" class="quanta-custom-checkbox-input">
<span class="quanta-custom-checkbox-box"></span>
Remember me
</label>
<label class="quanta-custom-radio quanta-custom-radio-success">
<input type="radio" name="plan" class="quanta-custom-radio-input">
<span class="quanta-custom-radio-box"></span>
Pro Plan
</label>