Input
Use the native type that matches the value
Correct types improve keyboards, autofill, validation, and assistive-technology context.
Sizes
Match density to the interface
Medium and Large work for touch. Small is reserved for dense desktop tools.
Adornments
Clarify format without replacing the label
Icons are decorative when the label already explains the value. Prefixes and suffixes stay outside the editable value.
States
Preserve meaning and entered values
Invalid feedback stays connected to the control. Disabled and readonly use their native HTML behavior.
Use at least four characters.
Textarea
Long-form text with vertical resize
Textarea grows vertically at the user’s request and never breaks the page width.
Include the context needed for someone new to understand the project.
Character count
Show limits before they become errors
The count updates while typing and changes emphasis near the native maximum length.
Usage guidance
Ask only for information the experience needs.
Choose the correct native type, enable relevant autocomplete, and keep placeholder examples short.
Next component: Native Select