Input
Displays a form input field or a component that looks like an input field.
Default
Basic input field.
html
<input type="email" placeholder="Email" class="vt-input" />With Label
Input with a descriptive label.
html
<div class="vt-space-y-2">
<label class="vt-label">Email</label>
<input type="email" placeholder="Enter your email" class="vt-input" />
</div>With Description
Input with a helper text below.
html
This is your public display name.
<div class="vt-space-y-2">
<label class="vt-label">Username</label>
<input type="text" placeholder="@johndoe" class="vt-input" />
<p class="vt-text-sm vt-text-mains-quaternary">This is your public display name.</p>
</div>With Icon
Input with a leading or trailing icon.
html
<!-- Leading icon -->
<div class="vt-relative">
<svg class="vt-absolute vt-left-3 vt-top-1/2 vt--translate-y-1/2 vt-w-4 vt-h-4 vt-text-mains-quaternary">...</svg>
<input type="text" placeholder="Search..." class="vt-input vt-pl-9" />
</div>
<!-- Trailing icon -->
<div class="vt-relative">
<input type="password" placeholder="Password" class="vt-input vt-pr-9" />
<button class="vt-absolute vt-right-3 vt-top-1/2 vt--translate-y-1/2 vt-text-mains-quaternary">
<svg class="vt-w-4 vt-h-4">...</svg>
</button>
</div>Error State
Input with validation error.
html
Please enter a valid email address.
<div class="vt-space-y-2">
<label class="vt-label">Email</label>
<input type="email" value="invalid-email" class="vt-input vt-input-error" />
<p class="vt-text-sm vt-text-error-primary">Please enter a valid email address.</p>
</div>Disabled
Input in disabled state.
html
<input type="email" placeholder="Email" class="vt-input" disabled />Form Example
Inputs combined in a login form.
html
<div class="vt-space-y-4">
<div class="vt-space-y-2">
<label class="vt-label">Email</label>
<input type="email" placeholder="m@example.com" class="vt-input" />
</div>
<div class="vt-space-y-2">
<label class="vt-label">Password</label>
<input type="password" placeholder="Enter password" class="vt-input" />
</div>
<button class="vt-btn vt-btn-primary vt-w-full">Sign In</button>
</div>API Reference
All CSS classes available for the Input component.
| Class | Type | Description |
|---|---|---|
vt-input |
Base | Base input styles — height, padding, border, rounded, font, transition |
vt-input-error |
State | Red border for validation errors |
vt-label |
Base | Label styles — font-size, font-weight, color |
vt-pl-9 |
Modifier | Extra left padding for leading icon space |
vt-pr-9 |
Modifier | Extra right padding for trailing icon space |
disabled |
State | HTML attribute — reduced opacity, no pointer events |
Accessibility
Keyboard and screen reader support.
| Feature | Details |
|---|---|
| Label | Always associate a visible label via for/id or wrapping label element |
| Error | Use aria-invalid="true" and aria-describedby pointing to error message |
| Required | Use required attribute and aria-required="true" for mandatory fields |
| Placeholder | Placeholder is not a substitute for a label — always provide a label |
| Disabled | Disabled inputs are excluded from tab order automatically |