Forms

Search Field

Wrap an input in .quanta-custom-form-search to get an embedded search icon.

<div class="quanta-form-group quanta-form-search max-w-xs">
  <input type="text"
         class="quanta-form-input w-full"
         placeholder="Search…" />
</div>

Checkbox Variants

Use .quanta-custom-checkbox-<variant> plus size and rounding utilities.

Primary Success Warning Danger Accent Neutral

Outline Primary Outline Success Outline Warning Outline Danger

Rounding

Tweak corner radius with .checkbox-rounded-none, .checkbox-rounded-sm, …, .checkbox-rounded-full.

No Round Default Large Round Pill

<label class="quanta-custom-checkbox 
  quanta-custom-checkbox-primary checkbox-md checkbox-rounded-full">
  <input type="checkbox" class="quanta-custom-checkbox-input">
  <span class="quanta-custom-checkbox-box"></span>
  <span class="quanta-custom-checkbox-label">Pill</span>
</label>

Radio Variants

Same pattern: .quanta-custom-radio-<variant> + radio-md + rounding.

Info Accent

Outline Neutral

Rounding

Control pill shape with .radio-sm….radio-3xl and always fully round.

Small Default Large

<label class="quanta-custom-radio 
  quanta-custom-radio-primary radio-lg">
  <input type="radio" name="group" class="quanta-custom-radio-input">
  <span class="quanta-custom-radio-box"></span>
  <span class="quanta-custom-radio-label">Large</span>
</label>

Switch Variants

Two styles: filled (.quanta-switch) and outline (.quanta-switch-outline), each with semantic classes.

<label class="quanta-switch-outline quanta-switch-outline-info">
  <input type="checkbox" class="quanta-switch-outline-input">
  <span class="quanta-switch-outline-slider"></span>
</label>