12 text-field UI Design Examples

AMP Stories 2019

Text Field Design Inspiration & Code Snippets

A text box or a text field is generally the primary way the visitor on your website will pass information to you. It is generally a single-line text fields where the user can enter things like email, username or their search query.

Can be used for :	email, login forms, search, …
HTML:	`<input type="text">`

HTML, CSS Code Snippets for text field

Update CSS on RegEx Validation for input fields

Here is a simple validation using repoCSS.js that lets you run RegEX validation on input fields and turns the input field background red when it detects a pattern.

input field reproCSS.js text field validation

eMail validation microinteraction

This text field validation micro interaction by Aaron Iker check for email added to this field and on successfully entering one the @ symbol turns to a tick. This...

email signup forms input field microinteractions text field validation

Single Field Email Registration Form with Validation

Here is a simple email registration form designed by Derek Torsani on Dribbble and converted to code by Elior Tabeka. There is a single text filed and on activating...

email signup forms input field text field validation

Tag Like Text Field Input Separator Using Comma

Say you want to provide an option for users to group certain parts of the text input as one item you can use this snippet designed by Julien Dargelos,...

input field text field

15 Amazing Free UI/UX Kits

The CodeMyUI team has put together a list of 15 Free UI/UX kits that we think will not only inspire you as you deliver world-class solutions for yourself and...