Sometimes there might be a third-party view form fill component that you really just like to use. Or maybe there's a fill type that you need that's not supported by FormKit. Well, you can actually create your own custom FormKit inputs, allowing you to customize the actual input, but then still get all the support for the labels, the validation, the help messages, and so on for free. So some of these inputs could be completely made from scratch by you.
But another common use case would be to wrap a third-party component like view multiselect so that it can be used with FormKit. So let's see how to do that in this lesson. First we'll need to install view multiselect. Now it's important that you install the next version here as the current stable release isn't quite ready for view 3.
Now let's create a brand new single file component. for our custom input. Instead of a form kit plugins folder, let's also create a form kit components folder. And I need to move this out to the root.
Let's call this view multiselect form kit. Now inside this file, let me just copy and paste some boilerplate code from the form kit documentation. Here you can see that we have a prop defined called context. This is going to be common to all of your custom FormKit inputs.
Inside of the template, we have just a little bit of boilerplate, but let's go ahead and get this on the page before we start actually implementing the multi-select. view, and inside of here, we'll need to import our new view multi-select FormKit component. formkit slash view. This is the function we'll use in order to define our custom input.
And let's call that input ms just short for multi-select. Awesome. Now, just like any other FormKit input, we can use the type of ms passing this variable directly. So down here, we're working with a schema because of what we were doing in an earlier lesson.
But this would, of course, work directly on a FormKit component as well. So let me create a new field down here. We'll say form kit. So remember this is the type and we'll pass it that MS custom type.
Then let's say this is a multi-select to choose your favorite framework. Excellent. Over in the browser, let me refresh the page. Yeah.
So now you can see we have our two other inputs, but now we have this new one down here with our boilerplate code in it. Now let's start to hook up the view multi select component to our custom form kit component. And here we'll need to import multi select from view multi select. Then we'll replace our div with the multi select component, giving it some static options for now.
Finally, let me just copy and paste a style tag in here that is importing the default styles for the view multi select. Now it's worth noting I grabbed these from the documentation for the view multi-select as well as this little example here So yeah, this is pretty easy to get started with then over on the left hand side Sure enough. We do have the multi-select now showing and it has our list of options Great, but when I choose one of the options You'll notice that it doesn't stick. We're not able to actually select any of these That's because we've yet to handle the props and events for our form kit input.
So let's handle the value first The multi select accepts a value via the model value prop and we can get the value from form kit on The context like this cool now back over in app dot view We can provide that value and it should show up as selected in the browser Okay Let me refresh the page here. Perfect. Yeah, now of is selected. So we've got our value properly going into the component.
Now let's also support passing in our options. I'll replace the hard-coded options here with the options from the context. And those are found on the adders. view, let's define those options, making sure to change them from what they originally were.
View. So some popular frameworks, of course, are View, my favorite, React, and Svelte, which is admittedly pretty nice as well. All right, so back in the browser, let me refresh one more time. So now we have Of selected because we do still have the value of Of, but we also have View, React, and Svelte here.
So I could change this to view, refresh, and yeah, then view is selected out of the box. Great. So we have our value hooked up to the FormKit custom input. We have the options hooked up properly.
But if we try to actually update the value of the input, you'll notice that we can't ever change it. View is always going to be the framework of choice, which is okay by me, but that might frustrate some of our other users. input and pass it the updated value. Okay, so whenever you want to change the value of a custom input in FormKit, you should call this input method on the node okay never directly alter the value instead use this function here it's going to make sure everything behaves properly and by the way if you weren't aware dollar sign event is a special keyword in order to grab what's being emitted from the components event all right i'll save that and now when i try to change things everything works as expected Now it looks like we've got the bulk of this covered, but just to make sure, in the next lesson we'll go through a checklist provided by FormKit and make sure we cover what's left.
Sometimes there might be a third-party view form fill component that you really just like to use. Or maybe there's a fill type that you need that's not supported by FormKit. Well, you can actually create your own custom FormKit inputs, allowing you to customize the actual input, but then still get all the support for the labels, the validation, the help messages, and so on for free. So some of these inputs could be completely made from scratch by you.
But another common use case would be to wrap a third-party component like view multiselect so that it can be used with FormKit. So let's see how to do that in this lesson. First we'll need to install view multiselect. Now it's important that you install the next version here as the current stable release isn't quite ready for view 3.
Now let's create a brand new single file component. for our custom input. Instead of a form kit plugins folder, let's also create a form kit components folder. And I need to move this out to the root.
Let's call this view multiselect form kit. Now inside this file, let me just copy and paste some boilerplate code from the form kit documentation. Here you can see that we have a prop defined called context. This is going to be common to all of your custom FormKit inputs.
Inside of the template, we have just a little bit of boilerplate, but let's go ahead and get this on the page before we start actually implementing the multi-select. view, and inside of here, we'll need to import our new view multi-select FormKit component. formkit slash view. This is the function we'll use in order to define our custom input.
And let's call that input ms just short for multi-select. Awesome. Now, just like any other FormKit input, we can use the type of ms passing this variable directly. So down here, we're working with a schema because of what we were doing in an earlier lesson.
But this would, of course, work directly on a FormKit component as well. So let me create a new field down here. We'll say form kit. So remember this is the type and we'll pass it that MS custom type.
Then let's say this is a multi-select to choose your favorite framework. Excellent. Over in the browser, let me refresh the page. Yeah.
So now you can see we have our two other inputs, but now we have this new one down here with our boilerplate code in it. Now let's start to hook up the view multi select component to our custom form kit component. And here we'll need to import multi select from view multi select. Then we'll replace our div with the multi select component, giving it some static options for now.
Finally, let me just copy and paste a style tag in here that is importing the default styles for the view multi select. Now it's worth noting I grabbed these from the documentation for the view multi-select as well as this little example here So yeah, this is pretty easy to get started with then over on the left hand side Sure enough. We do have the multi-select now showing and it has our list of options Great, but when I choose one of the options You'll notice that it doesn't stick. We're not able to actually select any of these That's because we've yet to handle the props and events for our form kit input.
So let's handle the value first The multi select accepts a value via the model value prop and we can get the value from form kit on The context like this cool now back over in app dot view We can provide that value and it should show up as selected in the browser Okay Let me refresh the page here. Perfect. Yeah, now of is selected. So we've got our value properly going into the component.
Now let's also support passing in our options. I'll replace the hard-coded options here with the options from the context. And those are found on the adders. view, let's define those options, making sure to change them from what they originally were.
View. So some popular frameworks, of course, are View, my favorite, React, and Svelte, which is admittedly pretty nice as well. All right, so back in the browser, let me refresh one more time. So now we have Of selected because we do still have the value of Of, but we also have View, React, and Svelte here.
So I could change this to view, refresh, and yeah, then view is selected out of the box. Great. So we have our value hooked up to the FormKit custom input. We have the options hooked up properly.
But if we try to actually update the value of the input, you'll notice that we can't ever change it. View is always going to be the framework of choice, which is okay by me, but that might frustrate some of our other users. input and pass it the updated value. Okay, so whenever you want to change the value of a custom input in FormKit, you should call this input method on the node okay never directly alter the value instead use this function here it's going to make sure everything behaves properly and by the way if you weren't aware dollar sign event is a special keyword in order to grab what's being emitted from the components event all right i'll save that and now when i try to change things everything works as expected Now it looks like we've got the bulk of this covered, but just to make sure, in the next lesson we'll go through a checklist provided by FormKit and make sure we cover what's left.