Input

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.

An input has a value, placeholder, type, size, disabled state, and optional surrounding controls. The placeholder should never replace a real label.

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.

Always provide a label. Use clear validation messages and keep focus styles visible.

npx honestui@latest add input

import { Input } from "@/components/ui/input"

<Input />

Our examples cover 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.

Small Size

Large Size

Disabled

File

With Label

With Button

Form Integration