Form Elements

Forms

Every input, select, checkbox, switch, and validation state — all dark/light-theme aware.

Text Inputs

All input types share consistent background, border, focus ring, and placeholder colouring across themes.

html
<input type="text" class="form-control" placeholder="Full name" />
<input type="email" class="form-control" placeholder="alice@example.com" />
<input type="number" class="form-control" placeholder="28" />
<input type="date" class="form-control" />
<input type="tel" class="form-control" placeholder="+1 555 000 0000" />
<input type="url" class="form-control" placeholder="https://yoursite.com" />
<input type="search" class="form-control" placeholder="Search…" />
<input type="text" class="form-control" disabled value="Disabled" />
<input type="text" class="form-control" readonly value="Read-only" />

Select

Styled <select> with proper dark/light background and arrow.

Hold Ctrl / ⌘ to select multiple.
html
<select class="form-select">
  <option value="" disabled selected>Choose…</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<!-- Multi-select -->
<select class="form-select" multiple>
  <option>Small</option>
  <option>Medium</option>
</select>

Textarea

Resizable multiline input, themed consistently.

html
<textarea class="form-control" rows="4" placeholder="Tell us about yourself…"></textarea>

Input Groups

Prepend or append text, icons, or buttons to any input.

@
$ USD
html
<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="username" />
</div>

<div class="input-group">
  <span class="input-group-text">$</span>
  <input type="number" class="form-control" placeholder="0.00" />
  <span class="input-group-text">USD</span>
</div>

Password Input

Show/hide toggle via data-pw-toggle. No extra configuration needed.

html
<div class="v-input-icon-wrap">
  <input type="password" class="form-control" id="pw" />
  <button class="v-input-icon-btn"
          type="button"
          data-pw-toggle="pw"
          aria-label="Show password">
    <i class="fa-regular fa-eye"></i>
  </button>
</div>

Floating Labels

Bootstrap floating label inputs styled with Vectra tokens.

html
<div class="form-floating">
  <input type="email" class="form-control" id="fl-email" placeholder="name@example.com" />
  <label for="fl-email">Email address</label>
</div>

<div class="form-floating">
  <select class="form-select" id="fl-country">
    <option value="" disabled selected>Select…</option>
    <option>United States</option>
  </select>
  <label for="fl-country">Country</label>
</div>

Checkboxes

Styled with accent colour. Use Bootstrap's .form-check wrapper.

html
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="chk1" checked />
  <label class="form-check-label" for="chk1">Option 1</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="chk2" disabled />
  <label class="form-check-label" for="chk2">Disabled option</label>
</div>

Radio Buttons

Standard radio group with accent-coloured selection state.

html
<div class="form-check">
  <input class="form-check-input" type="radio" name="plan" id="plan1" checked />
  <label class="form-check-label" for="plan1">Starter — Free</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="plan" id="plan2" />
  <label class="form-check-label" for="plan2">Pro — $29/mo</label>
</div>

Switches (Toggle)

On/off toggle using Bootstrap's .form-switch pattern.

html
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="sw1" checked />
  <label class="form-check-label" for="sw1">Enable notifications</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="sw2" disabled />
  <label class="form-check-label" for="sw2">Disabled switch</label>
</div>

Range Slider

Native <input type="range"> with thumb styled to the accent colour.

html
<label class="form-label" for="rng1">Volume: <span id="rngVal">60</span>%</label>
<input type="range" class="form-range" id="rng1"
       min="0" max="100" value="60"
       oninput="document.getElementById('rngVal').textContent=this.value" />

Validation States

Use .is-valid / .is-invalid classes on inputs. Include .valid-feedback / .invalid-feedback beneath.

Looks good!
Please provide a valid email address.
html
<input type="email" class="form-control is-valid" value="alice@example.com" />
<div class="valid-feedback">Looks good!</div>

<input type="email" class="form-control is-invalid" value="not-an-email" />
<div class="invalid-feedback">Please provide a valid email address.</div>

Sample Forms

Full form examples: contact, settings, and newsletter.

Contact Us
Stay in the loop

Get updates when new components or documentation are added.

html
<!-- Contact form inside a card -->
<div class="v-card">
  <h5 class="mb-3">Contact Us</h5>
  <form novalidate>
    <div class="row g-3">
      <div class="col-md-6">
        <label class="form-label" for="cf-fname">First name</label>
        <input type="text" class="form-control" id="cf-fname" required />
      </div>
      <div class="col-12">
        <label class="form-label" for="cf-email">Email</label>
        <input type="email" class="form-control" id="cf-email" required />
      </div>
      <div class="col-12">
        <button type="submit" class="v-btn v-btn-primary">Send Message</button>
      </div>
    </div>
  </form>
</div>