Form
Form layout patterns with labels, inputs, validation states, and helper text.
Login Form
Standard vertical form layout with email and password fields.
html
<form class="vt-space-y-4">
<div class="vt-field">
<label class="vt-label">Email</label>
<input type="email" class="vt-input" placeholder="you@example.com" />
</div>
<div class="vt-field">
<label class="vt-label">Password</label>
<input type="password" class="vt-input" />
</div>
<button type="submit" class="vt-btn vt-btn-primary vt-w-full">Sign In</button>
</form>With Helper Text
Form fields with hint text below the input.
html
Must be 3-20 characters, letters and numbers only
Maximum 160 characters
<div class="vt-field">
<label class="vt-label">Username</label>
<input type="text" class="vt-input" />
<p class="vt-field-description">Must be 3-20 characters</p>
</div>Validation States
Error and success states with colored borders and messages.
html
Please enter a valid email address
Username is available
<div class="vt-field vt-field-error">
<label class="vt-label">Email</label>
<input type="email" class="vt-input" value="invalid" />
<p class="vt-field-error">Please enter a valid email address</p>
</div>Horizontal Layout
Label and input on the same row for settings-style forms.
html
<div class="vt-field vt-flex-row vt-items-center vt-gap-4">
<label class="vt-label vt-w-32">Full Name</label>
<div class="vt-flex-1">
<input type="text" class="vt-input" />
</div>
</div>Registration Form
Complete registration form with multiple field types.
Create Account
Fill in your details to get started
Anatomy
HTML structure of the Form component.
form ← Form element
└── div.vt-space-y-1.5 ← Field group
├── label ← Field label
├── div.vt-relative ← Input wrapper (for icon)
│ ├── svg ← Leading icon (optional)
│ └── input.vt-input ← Input field
└── p.vt-field-description ← Helper / error message
└── button.vt-btn.vt-btn-primary ← Submit buttonAPI Reference
All CSS classes available for the Form component.
| Class | Type | Description |
|---|---|---|
vt-space-y-4 |
Spacing | Vertical spacing between form fields |
vt-space-y-1.5 |
Spacing | Tight spacing between label, input, and hint |
vt-text-sm vt-font-medium |
Typography | Form label text style |
vt-h-10 vt-rounded-lg |
Shape | Input height and border radius |
vt-border vt-border-border-strong |
Border | Default input border |
vt-bg-surfaces-surface |
Color | Input background color |
vt-focus-visible:ring-1 vt-focus-visible:ring-info-primary |
State | Blue focus ring on input focus |
vt-border-error-primary |
State | Red border for error state inputs |
vt-focus-visible:ring-error-primary |
State | Red focus ring for error state |
vt-border-success-primary |
State | Green border for success state inputs |
vt-text-error-primary |
Color | Red text for error messages |
vt-text-success-primary |
Color | Green text for success messages |
vt-text-mains-quaternary |
Color | Muted text for hint/helper text |
vt-btn vt-btn-primary vt-w-full |
Component | Full-width primary submit button |
vt-checkbox |
Component | Styled checkbox input |
Accessibility
Keyboard and screen reader support.
| Feature | Details |
|---|---|
| Labels | Every input must have a visible label linked via for/id attributes |
| Errors | Error messages linked via aria-describedby, invalid fields use aria-invalid="true" |
| Required | Required fields should use required attribute and aria-required="true" |
| Groups | Related fields wrapped in fieldset with legend element |
| Submit | Form submission feedback should be announced to screen readers |