Form Fields ✨

A list of various form fields including password validation, feedback fields, label animation and more to help you design beautiful eye-catching forms for your projects!

• Multiselect Dropdown
• Password Validation
• Star Rating Field
• Feedback Field
• Feedback Field with Emojis
• Label Animation
• Toggle Password Field
• Radio Cards
• Invalid Input Shake Animation

Multiselect Dropdown ⚡

A Multiselect Dropdown to allow user to select more than one option in a form. Uses JS to handle all functionality and CSS transform properties from animation!
📎 View code here.

Password Validation ⚡

A Password Validation Field to handle some constraints on the password! This was built mostly to practice different JS concepts but you may use it in a project also.
📎 View code here.

Star Rating Field ⚡

A Star Rating Field to get user rating! Uses clip-path to draw the stars and JS for the functionality.
📎 View code here.

Feedback Field ⚡

A Feedback Field to get user feeback! Uses CSS to draw the emojis and JS for the functionality.
📎 View code here.

Feedback Field with Emojis ⚡

A Feedback Field to get user feeback! Emoji images are used which are grayed out with CSS filter grayscale() property! JS for the functionality.
📎 View code here.

Label Animation ⚡

An Input Label Animation for textboxes in forms which uses CSS pseudo classes and position properties!
📎 View code here.

Toggle Password Field ⚡

A Toggle Password Field to show/hide password! Uses fontawesome for icons and JS to handle click events.
📎 View code here.

Radio Cards ⚡

Radio Cards made using CSS :checked pseudo class of an input radio tag!
📎 View code here.

Invalid Input Shake Animation ⚡

Invalid Input Shake Animation made using CSS pseudo class :invalid and :valid to detect whether the filled value is allowed or not! HTML pattern attribute of input element helps to make this check.

Note: For complex and more secure validation, please use JavaScript.
📎 View code here.