In some cases, you may want to apply a different state to your form when it is loading or being submitted.
Loading vs Submit
On initial load
When the form is first loaded, the
loading state will be applied to the form. This is useful for displaying a loading spinner or other loading content.
On form submit
When the form is submitted, the
submit state will be applied to the form.
In the case where both directives are applied, the
submit state will take precedence.
Like the Error state, the loading/submit directives are invoked when the form is loading and being submitted. You can pass 4 options:
- show: This will show the element if the form is submitting
- text: (Submit only) This will inject the text into the element if the form is submitting
- class: This will add a class to the element if the form is submitting
- style: This will add the styles to the element if the form is submitting
<div loading:show loading:class="bg-orange-500" loading:style="background: gray; color: white" />
Full example (animated spinner using tailwindcss):
<form class="relative p-10"> <div loading:show class="absolute left-0 top-0 w-full h-full bg-white bg-opacity-75 z-10 "> <div class="flex justify-center items-center h-64"> <div class="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div> </div> </div>
<div submit:show submit:text="Show this text when the form is being submitted (but not on the initial load)" submit:class="bg-orange-500" submit:style="background: orange; color: white" />
<div submit:show> <h3>One moment</h3> </div> <input type="text" name="first_name" submit:class="bg-gray-500"> <button type="submit" submit:text="Saving...">Save</button>
In the above example:
- The div will be shown when the form is submitting, and only when the form is submitting
- The input will have a class of
bg-gray-500when the form is submitting.
- The button will have the text
Saving...when the form is submitting.
Note on style option
!important in the style value will not work.