Text (mandatory)
Can be used in forms.
This is an example of a mandatory field.
When the value meets the requirement of the input field a green checkmark will be shown.
Only the HTML and CSS are necessary to create the input field along with all the interactions. No JavaScript required.
Code: 🔼
Text (description)
Can be used in forms.
This is an example of an optional field with a description.
Checkmark will be shown upon focus even when no value is entered. Border is green by default.
Only the HTML and CSS are necessary to create the input field along with all the interactions. No JavaScript required.
Code: 🔼
Text (description, placeholder)
Can be used in forms.
This is an example of an optional field with a description and a placeholder text.
Checkmark will be shown upon focus even when no value is entered. Border is green by default.
Only the HTML and CSS are necessary to create the input field along with all the interactions. No JavaScript required.
Code: 🔼
Number (description, default value)
Can be used in forms.
This is an example of an optional field with a description and a placeholder text.
Checkmark will be shown upon focus even when no value is entered. Border is green by default.
Only the HTML and CSS are necessary to create the input field along with all the interactions. No JavaScript required.
Code: 🔼
Number (description, default value, hidden spinners)
Can be used in forms. The number spinners are hidden.
This is an example of an optional field with a description and a placeholder text.
Checkmark will be shown upon focus even when no value is entered. Border is green by default.
Only the HTML and CSS are necessary to create the input field along with all the interactions. No JavaScript required.
Code: 🔼
Number (disabled)
Can be used in forms.
This is an example of a disabled field.
Only the HTML and CSS are necessary to create the input field along with all the interactions. No JavaScript required.