Text Fields
Text fields let users enter and edit text. They are one of the most common form components and should be clearly labeled, easy to interact with, and provide helpful validation feedback.
Basic Input
Always pair inputs with labels. The label should clearly describe the expected content.
With Icons
Add leading or trailing icons for context. Wrap the input in a relative container and position icons absolutely.
Password Input
Include a visibility toggle for password fields to allow users to verify their input.
Textarea
Use textarea for multi-line input. It shares the same border, radius, and focus treatment as the single-line input.
Your message will be reviewed within 24 hours.
Form Composition
Combine text fields with other components for complete form patterns.
Matching Select + Text Field
Use selects and inputs together with identical height, radius, and focus treatment for a coherent form language.
States
Text fields support default, disabled, and error states.
Please enter a valid email address.