Date (mandatory)

Can be used in forms.

This is an example of a mandatory date 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.

However, not all browsers support the HTML5 input[type=date] field. Older browsers like IE will not show a datepicker.

In order to have a date picker show for such browsers you'll need a Polyfill.

Code: 🔼

📋CSS
📋HTML
📋React

Date (description)

Can be used in forms.

This is an example of an optional date field.

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.

However, not all browsers support the HTML5 input[type=date] field. Older browsers like IE will not show a datepicker.

In order to have a date picker show for such browsers you'll need a Polyfill.

optional text area

Code: 🔼

📋CSS
📋HTML
📋React

Date YYYY-MM (mandatory)

Can be used in forms.

This is an example of a mandatory year-month 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.

However, not all browsers support the HTML5 input[type=date] field. Older browsers like IE will not show a datepicker.

In order to have a date picker show for such browsers you'll need a Polyfill.

Please pick a date

Code: 🔼

📋CSS
📋HTML
📋React