Input

Input collects a single line of text or another native HTML value such as an email address, number, or password. It keeps standard browser form behavior while applying argv styling.

Choose the native type that matches the expected value. This gives users the correct keyboard, autofill behavior, and built-in semantics where supported.

Installation

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/input.json

Usage

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

<label htmlFor="email">Email address</label>
<Input id="email" name="email" type="email" autoComplete="email" />

States

Input forwards native input props and the ref behavior supported by Base UI. Use attributes such as name, type, required, autoComplete, and inputMode to describe the field accurately.

Use disabled for values that are unavailable and should not be submitted. Use readOnly for immutable values that should remain selectable and participate in form submission.

Set aria-invalid="true" when validation fails. Keep the entered value available so users can understand and correct the problem.

<Input
    id="endpoint"
    aria-invalid="true"
    aria-describedby="endpoint-error"
/>
<p id="endpoint-error">Enter a complete HTTPS URL.</p>

API Reference

Input

Input accepts all native input props.

Accessibility

Every input needs an accessible name. Prefer a visible <label> connected through matching htmlFor and id values instead of using a placeholder as the label.

Connect help or error text with aria-describedby. Write errors that identify the problem and explain how to fix it.