Inputs
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.
Sizing
By manipulating the Tailwind classes you can change the size of the inputs.
Disabled
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.
Textarea
The textarea
tag defines a multi-line text input control.
Checkbox
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.

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.