input

When to use

• Use Input for a single line of free-form text such as names, domains, or tokens.
• Switch to Textarea the moment content can wrap to multiple lines.
• Use Combobox when the value comes from a known list the user filters by typing.
• For an inline search box, use SearchInput with a scoped placeholder like Search projects; do not embed it inside an unrelated form.

Behavior

• Validate on blur, not on every keystroke; surface the message with the error prop.
• Trim leading and trailing whitespace before submit so example.com and example.com resolve to one value.
• Keep the field focusable while saving; pair disabled with a spinner only when input is impossible.
• Do not wrap a labelled Input in a Tooltip; put the explainer on a sibling icon button so the label stays announced.

Content

• Labels are short Title Case nouns such as Project Name, Domain, or Environment Variable Name.
• Placeholders show an example value such as my-awesome-project or example.com, never instructions.
• Helper text is sentence case, one sentence with a trailing period, on a sibling element wired through aria-describedby.
• Validation names the field and the constraint, ends in a period, and skips "please":
  Project name is required. and Code must be 6 digits..

Accessibility

• Passing a string to label associates it with the input automatically; provide an id when you need a stable ID for external labels or references.
• For icon-only affordances, use a circular button with an accessible name such as aria-label="Clear search" rather than an unlabeled icon.
• A SearchInput placeholder names the scope, such as Search projects, so its purpose is clear without sighted context.