When to use
Use for short, single-line values the user can type or paste.
Loading…
Find components, patterns, tokens, and docs
Documentation
The basic building block of forms. Collects a single value with a visible label.
Always pair with a visible label. Use placeholder as an example, never as the only label.
Appearance is not enough. This is the contract for when the control earns a place in the product.
Use for short, single-line values the user can type or paste.
Use textarea for multi-line copy, or select when the set of options is known.
Gives users a predictable place to enter data without guessing the format.
A visible label must be associated with the field. Errors should be linked via aria-describedby. Don't rely on placeholder as the only name.
<Input
size="medium"
width="full"
>
Email
</Input>