Component

Input

Single-line text field for user data entry. Pairs with Label and supports disabled, readonly, and error states.

Usage

Always pair inputs with a visible label. Use placeholder as a hint, not a label replacement.

Playground

Preview

Configure

Leave blank to use the type default

Yes
No
No

Code

<div className="grid w-full max-w-sm gap-1.5">
  <Label htmlFor="input">Label</Label>
  <div className="relative flex items-center">
    <span className="pointer-events-none absolute left-2.5 text-muted-foreground">
      <Type className="size-3.5" />
    </span>
    <Input
      id="input"
      type="text"
      placeholder="Enter text…"
      className="pl-8"
    />
  </div>
</div>

Do

  • Always pair with a visible label
  • Use placeholder text to show format (e.g. 'name@example.com')
  • Add helper text below the field for format hints or privacy notes

Don't

  • Don't use placeholder as the only label
  • Don't remove the label for 'space', use a visually hidden label instead