TextField
A text field component is an interface element for user input in text or numeric format, commonly used in forms and dialogs.
Usage
- Text fields are for inputting text or numeric data.
- They're often seen in forms and dialog boxes.
- They are used for drop downs and to search for options.
Anatomy
The text field consists of labeled text, input text with a placeholder, and an optional trailing icon.
Variant
Variants of the text field component includes line, filled, mobile number and OTP.
Line / Without Trailing Icon
Line / With Trailing Icon
Filled / Without Trailing Icon
Filled / With Trailing Icon
States
Text field have default, hovered, typing, typed, error, success & disabled states.
Line
Default
Typed
Error
Success
Filled
Default
Typed
Error
Success
Sizes
Text field are available in extra small, small, medium and large sizes.
Extra Small
Small
Medium
Large
Specifications
Structure and spacing measurements for text field.
Live Demo
The Text Field is demonstrated in a live environment in this demo.