Input

PreviewCopy Anchor Link

Use Input for a single value, with a visible label and any instructions outside the control. Try typing or use Tab to inspect its focus outline.

InstallationCopy Anchor Link

From a shadcn-initialized project:

pnpm dlx shadcn@latest add http://127.0.0.1:3017/r/input.json

Installs Input source and its variant dependency. It uses a native HTML input and your existing cn utility and semantic colors. Field, Label, and Button are separate components used in these examples. The optional Migoy theme supplies shared size and focus tokens; fallbacks work with a standard shadcn palette. See the registry guide for local endpoint and update details.

UsageCopy Anchor Link

import { Input } from '@/components/ui/input';
import { Field, FieldLabel } from '@/components/ui/field';

<Field>
  <FieldLabel htmlFor="project">Project name</FieldLabel>
  <Input id="project" name="project" placeholder="Website redesign" />
</Field>

Input forwards native input props, including ref, value, defaultValue, onChange, autoComplete, required, and readOnly. It does not manage validation or store a value internally.

SizesCopy Anchor Link

Use controlSize to match nearby buttons. The native size prop remains available for character-width hints; width is full by default, so constrain the field container for shorter values.

Heights and radii read the shared control tokens. Small inputs use the 12px / 16px caption role on desktop; default and large inputs keep 14px / 20px. Input text stays 16px on smaller screens. Labels remain 14px / 20px. Prefer the large size for touch-oriented forms; small is intended for dense desktop interfaces.

Interaction statesCopy Anchor Link

Hover and focus below are pinned using the same styling utilities as the real interaction. The fields remain editable. Read-only values can be focused and copied; disabled controls are skipped by Tab and omitted from form submission.

The control has a page-colored surface with no shadow. Hover emphasizes the border. Keyboard focus adds the same offset outline as Button. Invalid inputs use a destructive border and a destructive focus outline, with a visible error message.

<Field data-disabled>
  <FieldLabel htmlFor="locked">Project name</FieldLabel>
  <Input id="locked" disabled defaultValue="Website redesign" />
</Field>

<Input aria-label="Project reference" readOnly value="PRJ-1042" />

ValidationCopy Anchor Link

Submit an empty or short name to see the error, then enter at least three characters and try again. This example validates locally and does not save data.

aria-invalid styles and announces the input state; data-invalid marks the surrounding Field while its label stays neutral. Connect error and helper IDs with aria-describedby. Mark required controls with required and explain the requirement visibly. Input supports browser validation; the example uses noValidate on its form to demonstrate custom feedback. Validate submitted data again on the server in a real product.

Native typesCopy Anchor Link

Choose the type that fits the data. Email and URL types expose suitable mobile keyboards and browser validation; password masks text; number retains native steppers; search retains browser-specific behavior. File selection stays native.

Use text with inputMode="numeric" for identifiers such as postal codes that can start with zero. File inputs cannot be given a non-empty controlled value. accept can guide the picker, but real uploads still need server-side type and size validation. Native widgets vary by browser and operating system.

CompositionCopy Anchor Link

• Use Field for a label, description, and error around one input.
• Use FieldGroup to arrange multiple labeled fields.
• Keep labels visible; placeholders are examples, not replacements for labels.
• Put essential instructions in helper text, not tooltips.
• Let long values scroll within the input; helper text and errors should wrap beneath it.

Use Input Group for embedded icons, prefixes, suffixes, and attached buttons. Standalone Input has no Input Group dependency.

APICopy Anchor Link

Design and examples follow shadcn Input. This implementation keeps the project's native input foundation and existing Field components.