Input

Composition preview

Try Input alongside its related fields & validation components. These examples keep all actions local.

Usage

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

<>
<Field>
  <FieldLabel htmlFor="project-name">Project name</FieldLabel>
  <Input id="project-name" name="projectName" required />
</Field>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

Native input props: type, name, value/defaultValue, required, disabled, ref; unstyled composition

Usage & accessibility

Keep labels associated and names stable. File, hidden, color, date/time and native radio types retain browser behavior.

Implementation contract

src/components/ui/input.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.