ComponentsForms
Input
A text field for collecting single-line user input.
Overview
An input collects single-line text from the user. Pair it with a Label for
accessible forms, and use aria-invalid to signal validation errors.
$ npx morpha-ui add inputExamples
With label
Disabled
Invalid
Please enter a valid email address.
Installation
Morpha UI components are distributed via the Morpha CLI (coming in a later
step): npx morpha-ui add input. In the meantime, since this is the base
shadcn component, you can also add it directly:
npx shadcn@latest add inputAPI Reference
Prop
Type
Accessibility
- Associate a
<Label htmlFor>with the input'sidso the label is clickable and announced. - Signal validation errors with
aria-invalidand link the message viaaria-describedby. - Disabled inputs are skipped in the tab order; prefer hiding actions over disabling without explanation.