Tailwind form examples
Can you please share examples of complete forms using Metronic Tailwind?
I found some inconsistencies between the form examples on Demo1 and the KtUI docs.
For example, this User edit form uses flex classes to create a horizontal form.
However, in this setup, it's not possible to use kt-form-description and kt-form-message like in the KTUI docs.
This requires a kt-form-item class around the field, but this class employs flex-direction: column;, which disrupts the horizontal layout.
Since forms are a crucial part of most CRM systems built with Metronic, it would be very beneficial to have a comprehensive example of a large form, along with demos of various form layouts, including those with and without error messages.
<pre lang="html">
<div class="w-full">
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="kt-form-label flex items-center gap-1 max-w-56" for="username">Username</label>
<div class="kt-form-control grow">
<input type="input" name="username" placeholder="Enter Username" class="kt-input" required="required" aria-invalid="true">
<div class="kt-form-description">Enter your email to proceed.</div>
<div class="kt-form-message">Please enter a valid email address.</div>
</div>
</div>
</div>
Replies (5)
Hi,
Are you using latest Metronic HTML 9.2.3 ?
Metronic 9.2.x is compatible with ktui.io.
Metronic 9.1.x is compatible with https://keenthemes.com/metronic/tailwind/docs-legacy/
Regards,
Sean
Hello Sean,
Thanks for taking the time to answer me.
Yes, I'm using the latest version of Metronic with KTUI. My point is:
The KTUI documentation only shows isolated field components. There is just one example of a form field with error messages and descriptions, which you can find here. In this example, the class .kt-form-item organizes the label and fields in a column due to the flex-direction: column; CSS property.
Demo1 has a few examples of complete forms, all of which use flex-direction: row; to position the labels and fields side by side. You can see an example here.
When trying to put together an entire form, there are no examples on how to display error messages next to the field.
My main question is: How can I add error messages like those in the KTUI example in this Demo1 example?
Since forms are a crucial part of any CRM built with Metronic, it would be great to have more complete examples of forms.
Hi,
Are you compiling the CSS each time you add/remove classes in your HTML. Tailwind requires CSS recompilation as you edit your HTML code:
https://keenthemes.com/metronic/tailwind/docs/getting-started/installation
Thus you can copy and paste any example from KtUI docs.
Regards,
Sean
Hello Sean!
Thank you for your response!
Yes, I'm indeed recompiling all Tailwind CSS every time I change classes in my files. I also understand that I can copy and paste examples from the KTUI documentation.
However, that brings me to my main point: there isn't a complete form example available—only isolated pieces and separate components.
I'm trying to build a form with labels and fields displayed side by side in the same row, similar to what we see in Demo1, while also including form descriptions and error messages.
Could you please provide such an example?
Thank you so much for your help!
Hi,
Sorry for the late reply.
You can use the forms from settings-sidebar example as they provided. You can also override styles of any "kt-*" classes with tailwind classes:
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="kt-form-label flex items-center gap-1 max-w-56">
Name
</label>
<div class="flex flex-col gap-0.5">
<input class="kt-input" type="text" value="Jason Tatum" />
<div class="kt-form-description">Description</div>
</div>
</div>Regards,
Sean
