Input
A native input element.
Overview
Use Input for short free-form text, numbers, email addresses, URLs, search terms, and file selection.
Input is a low-level control. In forms, wrap it with Field so users get a label, description, error, and disabled state in a consistent layout.
Anatomy
An input has a value, placeholder, type, size, disabled state, and optional surrounding controls. The placeholder should never replace a real label.
Usage guidance
Choose the native input type that matches the data. Use email for email, search for search, file for files, and so on. Use Textarea for longer multi-line text.
Accessibility
Always provide a label. Use clear validation messages and keep focus styles visible.
Installation
npx love-ui@latest add inputUsage
import { Input } from "@/components/ui/input"<Input />Examples
The examples show sizes, disabled state, file input, labels, attached buttons, and form usage.
For accessible labelling and validation, prefer using the Field component to wrap inputs, or the FieldControl component. See some related examples.