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" aria-label="Email">

With Label

Input with a descriptive label.

html

Password

<div class="vt-space-y-2">
  <label class="vt-label" for="input-2-1">
    Email
  </label>
  <input type="email" placeholder="Enter your email" class="vt-input" id="input-2-1">
</div>
<div class="vt-space-y-2">
  <label class="vt-label" for="input-2-2">
    Password
  </label>
  <input type="password" placeholder="Enter your password" class="vt-input" id="input-2-2">
</div>

With Description

Input with a helper text below.

html

Username

This is your public display name.

<div class="vt-space-y-2">
  <label class="vt-label" for="input-3-1">
    Username
  </label>
  <input type="text" placeholder="@johndoe" class="vt-input" id="input-3-1" aria-describedby="input-3-2">
  <p class="vt-text-sm vt-text-foreground-muted" id="input-3-2">This is your public display name.</p>
</div>

With Icon

Input with a leading or trailing icon.

html

<div class="vt-relative">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-search vt-absolute vt-left-3 vt-top-1/2 vt--translate-y-1/2 vt-text-foreground-muted">
    <path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle>
  </svg>
  <input type="text" placeholder="Search..." class="vt-input vt-pl-10" aria-label="Search...">
</div>

<div class="vt-relative">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-mail vt-absolute vt-left-3 vt-top-1/2 vt--translate-y-1/2 vt-text-foreground-muted">
    <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect>
  </svg>
  <input type="email" placeholder="Email address" class="vt-input vt-pl-10" aria-label="Email address">
</div>

<div class="vt-relative">
  <input type="password" placeholder="Password" class="vt-input vt-pr-10" aria-label="Password">
  <button type="button" data-password-toggle="" aria-label="Show password" class="vt-absolute vt-right-3 vt-top-1/2 vt--translate-y-1/2 vt-text-foreground-muted vt-hover:text-foreground-primary vt-transition-colors">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-eye">
      <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle>
    </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" for="input-5-1">
    Email
  </label>
  <input type="email" value="invalid-email" aria-invalid="true" class="vt-input vt-input-error" id="input-5-1" aria-describedby="input-5-2">
  <p class="vt-text-sm vt-text-error-fill" id="input-5-2">Please enter a valid email address.</p>
</div>

Disabled

Input in disabled state.

html

<input type="email" placeholder="Email" disabled="" class="vt-input" aria-label="Email">

Form Example

Inputs combined in a login form.

html

Password

<div class="vt-space-y-4">
  <div class="vt-space-y-2">
    <label class="vt-label" for="input-7-1">
      Email
    </label>
    <input type="email" placeholder="m@example.com" class="vt-input" id="input-7-1">
  </div>
  <div class="vt-space-y-2">
    <label class="vt-label" for="input-7-2">
      Password
    </label>
    <input type="password" placeholder="Enter password" class="vt-input" id="input-7-2">
  </div>
  <button class="vt-btn vt-btn-primary vt-w-full">
    Sign In
  </button>
</div>

Guidelines

Single-line text entry. sm size only in dense toolbars/filters. Always pair with a visible label; helper/error text goes below at 12px (vt-caption).

Always pair an input with a visible label.

Don't

Don't use placeholder text as a substitute for a label.

Please enter a valid email address.

Pair the error state with a message below the field.

Don't

Don't mark a field invalid with a red border and no message.

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-10`	Modifier	Extra left padding for leading icon space
`vt-pr-10`	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

Used in:

Command Dialog Form