Text Inputs
All input types share consistent background, border, focus ring, and placeholder colouring across themes.
Select
Styled <select> with proper dark/light background and arrow.
Textarea
Resizable multiline input, themed consistently.
Input Groups
Prepend or append text, icons, or buttons to any input.
Password Input
Show/hide toggle via data-pw-toggle. No extra configuration needed.
<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.
Checkboxes
Styled with accent colour. Use Bootstrap's .form-check wrapper.
Radio Buttons
Standard radio group with accent-coloured selection state.
Switches (Toggle)
On/off toggle using Bootstrap's .form-switch pattern.
Range Slider
Native <input type="range"> with thumb styled to the accent colour.
Validation States
Use .is-valid / .is-invalid classes on inputs. Include .valid-feedback / .invalid-feedback beneath.
Sample Forms
Full form examples: contact, settings, and newsletter.
Contact Us
Stay in the loop
Get updates when new components or documentation are added.