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: 🔼

📋CSS
📋HTML
📋React

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.

optional text area

Code: 🔼

📋CSS
📋HTML
📋React

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.

Optional field with placeholder

Code: 🔼

📋CSS
📋HTML
📋React

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.

Optional field with placeholder

Code: 🔼

📋CSS
📋HTML
📋React

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.

Optional field with placeholder

Code: 🔼

📋CSS
📋HTML
📋React

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.

Optional field with placeholder

Code: 🔼

📋CSS
📋HTML
📋React