HTML is Amazing. Here are three common UI components that you actually don't need JavaScript for

A great paradigm in programming is "don't reinvent the wheel". The implementation of this sentiment often takes form in the usage of libraries. Don't get me wrong, libraries are great and can be invaluable, but here's the thing: you don't always need them.

JavaScript is cool and all, but I'm still on the fence. HTML is actually pretty amazing, and can totally be the right tool for the job without having to get stuck in dependency hell.

Instead of using a bloated library, why not try your hand at what vanilla HTML has to offer? Here are my top three components for UI design I commonly see implemented with JavaScript, but that actually work with good ol' vanilla HTML and that can be used to create interactive HTML elements without any JavaScript.

Dropdowns

The <select> element is commonly used in forms, but with a bit of imagination you can use it for a bunch of other things. How about a language selector, page switcher, or a version menu for documentation pages?

<select>
    <option value="en">English</option>
    <option value="sv">Swedish</option>
    <option value="es">Spanish</option>
    <option value="fr">French</option>
    <option value="de">German</option>
</select> 

Searchable inputs

As you can see, select elements are great when you want to limit selections to a predefined list, but can become quite overwhelming when you have a large list of options.

You can use the <datalist> element to create a set of values that the browser can then use for autocompletion.

<input type="text" list="common-search-values" placeholder="Search...">
<datalist id="common-search-values">
    <option>George Orwell</option>
    <option>Daniel Handler</option>
    <option>Neil Gaiman</option>
    <option>Ernest Hemingway</option>
    <option>Virginia Woolf</option>
</datalist>

Vanilla HTML datetime picker

This one is my favorite. I spend too much time trying out JavaScript datetime pickers before realizing that HTML already has one. All you need is the following snippet:

<input type="datetime-local">

Learn more

You can try all of the examples shown here on CodePen, https://codepen.io/stresseddev/pen/zYRGgrN

And here are some links to the MDN resources.

• Dropdowns
• Search with autocomplete
• Date picker

What are your favorite HTML elements? When does it make sense to use JavaScript, and when is it best to stick to HTML? Let me know in the comments!