Form Elements
Every form input, control, layout and validation pattern in the VBoard design system
Text Inputs
Standard text inputs — all HTML input types and textarea.
Enter your legal full name
<input class="form-control" type="text" placeholder="Enter
text">
<input class="form-control" type="email" placeholder="Email">
<textarea class="form-control" rows="4"></textarea>
<input class="form-control" type="text" disabled>
Input Sizes
Five size scales for inputs — xs, sm, md (default), lg, xl.
<input class="form-control
form-control-xs" type="text">
<input class="form-control
form-control-sm" type="text">
<input class="form-control
form-control-lg" type="text">
<input class="form-control
form-control-xl" type="text">
Input Variants
Filled, flat underline, and ghost (borderless) input styles.
<input class="form-control"> <!--
Default -->
<input class="form-control
form-control-filled"> <!-- Filled
-->
<input class="form-control
form-control-flat"> <!-- Underline
-->
Icon Inputs & Addons
Inputs with leading/trailing icons and prefix/suffix addons.
Icon inside input
Prefix / Suffix addons
https://
USD
@
<!-- Icon inside -->
<div class="input-wrap
has-l">
<i class="fas fa-search
input-icon-l"></i>
<input class="form-control" type="text">
</div>
<!-- Addon -->
<div class="input-group">
<div class="addon">https://</div>
<input class="form-control" type="text">
</div>
Validation States
Valid, invalid, and warning states with helper text feedback.
Looks great!
Please enter a valid email
address.
Weak password. Consider adding symbols.
<input class="form-control
is-valid" type="email">
<input class="form-control
is-invalid" type="email">
<input class="form-control
is-warning" type="text">
Select Dropdowns
Native select, searchable custom select, and multi-select.
Native selects
Searchable custom select
Select a role…
Select skills…
<!-- Native select -->
<select class="form-control">
<option value="">Select…</option>
<option>Engineering</option>
</select>
Checkboxes
Custom styled checkboxes with card style, colour variants, and
inline layout.
Card style
Colour variants
Inline layout
Native (accent-color)
<label class="check-item" onclick="toggleCheck(this)">
<input type="checkbox">
<div class="custom-checkbox"></div>
<div class="check-label">Email Notifications</div>
</label>
Radio Buttons
Custom styled radio buttons in card, inline, and native styles.
Plan selection (card)
Gender (inline)
Native radios
<label class="radio-item" onclick="pickRadio(this,'grpId')">
<input type="radio"
name="plan">
<div class="custom-radio"></div>
<div class="check-label">Pro Plan</div>
</label>
Toggle Switches
Custom toggle switches in multiple sizes and colour variants.
Settings toggles
Dark Mode
Toggle dark theme
Two-Factor Auth
Require 2FA on login
Email Notifications
Receive email updates
Public Profile
Make profile visible
Sizes
Colour variants
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
<!-- Sizes: add s-sm or s-lg | Colours: s-success, s-danger, s-warning,
s-accent -->
Range Sliders
Styled range inputs with live value display and colour variants.
050100
0%50%100%
<input type="range"
min="0" max="100" value="65"
style="accent-color:var(--primary)"
oninput="display(this.value)">
<!-- Colour classes: r-success | r-warning | r-danger -->
Date, Time & Color Pickers
All native date/time pickers and the HTML color input — styled to
match the system.
<input class="form-control" type="date">
<input class="form-control" type="time">
<input class="form-control" type="datetime-local">
<input class="form-control" type="color" value="#6366f1">
File Upload
Drag-and-drop zone with click-to-browse and file preview list.
Drag & drop files here
or browse files · PNG, JPG,
PDF, DOCX · Max 10 MB
<div class="file-drop">
<input type="file"
multiple>
<div class="file-drop-icon">...</div>
<div class="file-drop-title">Drag & drop files here</div>
</div>
Star Rating
Interactive star rating widget with hover preview and click to
set.
★
★
★
★
★
4 out of
5 — Great!
★
★
★
★
★
<div class="stars">
<span class="star
active" onclick="starClick('id',1)">★</span>
...
</div>
OTP / PIN Input
One-time password input boxes that auto-advance and support paste.
<div class="otp-wrap">
<input class="otp-box" type="text"
maxlength="1">
<!-- repeat × 6 -->
</div>
Tag / Token Input
Type and press Enter or comma to add tags. Click × to remove.
React
Node.js
TypeScript
Press Enter or comma to add a tag
<div class="tag-input-wrap">
<span class="tag-chip">React <button>✕</button></span>
<input class="tag-input" type="text"
placeholder="Add tag…">
</div>
Character Counter
Textarea with live character count — turns amber at 80% and red
when over limit.
0 / 200
Max 200 characters
Progress Bars
Labelled progress bars — solid, gradient, striped, thin and thick
variants.
Thin
Thick
Animated striped
<div class="pbar-track">
<div class="pbar-fill
pbar-primary" style="width:78%"></div>
</div>
<!-- Variants: pbar-success | pbar-warning | pbar-danger -->
<!-- Modifiers: pbar-thin | pbar-thick | pbar-striped (on parent)
-->
Complete Form Example
A full registration form combining all elements with live
validation on submit.