Almost every project requires a form, and every form consists of input elements. Let's look at them.

Basic input field

TW Elements uses Material Design-specific inputs. They have a small full border, but when you click on them, the label jumps up.

Apart from the large number of tailwind classes, a basic example of the input field consists of the input element with specified ID and label element connected via this ID with the input.

The key element is the data-twe-input-wrapper-init attribute, which, together with the JavaScipt code given below, initializes this component.


By manipulating the Tailwind classes you can change the size of the inputs.


Add the disabled boolean attribute on an input with bg-neutral-100 classes to give it a neutraled out appearance and remove pointer events and make it unusable and un-clickable.


The input type="email" defines a field for an e-mail address. The input value is automatically validated to ensure it is a properly formatted e-mail address.


The textarea tag defines a multi-line text input control.


Checkboxes are most often used for selecting multiple values from several options, or present a list containing sub-selections.

Inputs have dozens of options and variants. We won't cover them all in this tutorial, but if you want to know more about them, check out the input documentation.

John Doe

About author

Michal Szymanski

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.