forms contract

Input

Single-line text entry control. The default form primitive; ~80% of form fields are this.

Variants

  • default
  • filled
  • inline

Sizes

  • sm
  • md
  • lg

Slots

  • leading
  • trailing

Example

<Input id="email" name="email" type="email" autoComplete="email" aria-describedby="email-error" aria-invalid={!!err} />

Usage rule

Always wrap in a Label component or pair with `<Label htmlFor>` — placeholders are never the only label.

The full Input contract has 7 more rules and 1 more example, plus the do-not patterns. Get the full recipe.

Get the Input contract in your project.