In order to have a little more control of our form, FormKit exposes several different prompts that we can use to customize it. One of these prompts is called Submit Behavior. If we set Submit Behavior to Live, this means that we can still edit the form inputs while form submission is in progress. By default, they are disabled just like the Submit button is while the form is being submitted.
You've also probably noticed that we don't have a button within our form. And yet one displays on the page here. That's because out of the box the form kit forms automatically generate a button. If we wanted to customize the label on the button, we could provide the submit label prop.
Yeah, that works great. Or you can set the actions prop to false. This will enable you to handle the button for yourself. But just be aware that if you do end up going this route, you would end up handling the loading state by yourself.
Or if you still want control over the actual markup of the button, just like with our fields, we can use a slot for the button as well. We'll want to target the default slot for the form, and from the context we'll destructure the state. Then we can take our button, bring it up into the slot, and we'll say it's disabled if state dot loading and Whoops, we'll also need to pass in of course all the other elements here into that default slot Also, let's print out login dot dot dot Whenever we're loading and otherwise just print out login awesome now when I submit the form We do get the proper state while things are processing and then once it's done after three seconds It reverts back to the original the point is Formkit is really doing a lot for us here when it comes to making nice forms. But we can also override all the smart defaults in a very intuitive way.
In order to have a little more control of our form, FormKit exposes several different prompts that we can use to customize it. One of these prompts is called Submit Behavior. If we set Submit Behavior to Live, this means that we can still edit the form inputs while form submission is in progress. By default, they are disabled just like the Submit button is while the form is being submitted.
You've also probably noticed that we don't have a button within our form. And yet one displays on the page here. That's because out of the box the form kit forms automatically generate a button. If we wanted to customize the label on the button, we could provide the submit label prop.
Yeah, that works great. Or you can set the actions prop to false. This will enable you to handle the button for yourself. But just be aware that if you do end up going this route, you would end up handling the loading state by yourself.
Or if you still want control over the actual markup of the button, just like with our fields, we can use a slot for the button as well. We'll want to target the default slot for the form, and from the context we'll destructure the state. Then we can take our button, bring it up into the slot, and we'll say it's disabled if state dot loading and Whoops, we'll also need to pass in of course all the other elements here into that default slot Also, let's print out login dot dot dot Whenever we're loading and otherwise just print out login awesome now when I submit the form We do get the proper state while things are processing and then once it's done after three seconds It reverts back to the original the point is Formkit is really doing a lot for us here when it comes to making nice forms. But we can also override all the smart defaults in a very intuitive way.