Text Input Element
The Text Input element handles single-line and multi-line user data, offering robust validation and visual styling options.
Live Preview
Text Input Preview
Specifications
Text inputs are highly configurable for different data types and designs:
- Input Types: Support for Text, Email, Password, Number, Tel, URL, and Textarea.
- Date & Time: Built-in pickers for Date, Time, and DateTime-Local formats.
- Sizing: Choose between Small, Medium (default), and Large heights.
- Styles: Toggle between Default (Bordered), Underline, Filled, or Ghost modes.
- Validation: Set Required flags, Min/Max Length, and unique values for numbers or dates.
- Placeholder & Defaults: Provide Placeholder text for guidance or a Default Value for pre-filled forms.
AI Guidance
How to prompt for Text Inputs:
- Add a large underlined input for an email address.
- Create a text area with 5 rows for the contact message.
- Insert a password field with a subtle ghost style.